Uncaught TypeError - Cannot read property 'msie' of undefined in jQgrid
Sorry for repeated question but previous answers of such questions didn't give me solution.
I've done following:
- Used jQGrid 3.5.3
Included js files are:
<script src="Script/Jquery.js" type="text/javascript"></script>
<script src="Script/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Script/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Script/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" type="text/javascript"></script>
I'm facing above error in jquery.jqGrid.min.js.
HTML Code
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div style="align: center">
<fieldset style="">
<legend style="text-align: Left; font-size: medium;"><strong>User Details </strong>
</legend>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>
<table style="width: auto; max-width: 60%">
<tr>
<td style="text-align: right">
<strong style="font-size: small">Name* :</strong>
</td>
<td style="text-align: left">
<asp:TextBox runat="server" ID="txtName" placeholder="Enter Name" TabIndex="1"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<strong style="font-size: small">DOB* :</strong>
</td>
<td style="text-align: left">
<input type="text" id="txtDOB" tabindex="2" />
<%--<asp:TextBox runat="server" ID="datepicker" placeholder="Enter DOB"></asp:TextBox>--%>
</td>
<td style="text-align: right">
<strong style="font-size: small">Age :</strong>
</td>
<td style="text-align: left">
<asp:TextBox runat="server" ID="txtAge" Enabled="false"></asp:TextBox>
</td>
</tr>
<tr>
<td style="text-align: right">
<strong style="font-size: small">Group* :</strong>
</td>
<td style="text-align: left">
<asp:DropDownList runat="server" ID="ddlGroup" TabIndex="3">
<asp:ListItem Selected="True" Value="0">Select Value</asp:ListItem>
<asp:ListItem Value="1">Gold</asp:ListItem>
<asp:ListItem Value="2">Silver</asp:ListItem>
<asp:ListItem Value="3">Bronze</asp:ListItem>
</asp:DropDownList>
</td>
<td style="text-align: right">
<asp:CheckBox runat="server" ID="chkActive" Text="Active" TabIndex="4" />
</td>
</tr>
<tr>
<td colspan="100%" align="center">
<asp:Button runat="server" ID="btnAdd" Text="ADD" OnClientClick="fnValidate();" TabIndex="5" />
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnAdd" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
<div align="center">
<table id="tblData">
</table>
</div>
</div>
</form>
My scripting code for this is:
var username = new Array();
var len = username.length;
$(function() {
$("#txtDOB").datepicker();
});
function fnValidate() {
if ($("#txtName").val() == "") {
alert("Please Enter UserName");
$("#txtName").focus();
return false;
}
else {
var alphaValidate = /^[a-zA-Z ]*$/;
if (!alphaValidate.test($("#txtName").val())) {
alert("Please Enter Only Text in User Name");
$("#txtName").val() = "";
$("#txtName").focus();
return false;
}
}
if (jQuery.inArray($("#txtName").val().toUpperCase(), username) == 0) {
alert("Please Enter Unique UserName.");
return false;
}
if ($("#txtDOB").val() == "") {
alert("Please Enter Birth Date.");
return false;
}
// if ($("#txtDOB").val().match(/(\d+)(-|\/)(\d+)(?:-|\/)(?:(\d+)\s+(\d+):(\d+)(?::(\d+))?(?:\.(\d+))?)?/)) {
// alert("Please Enter Only Numeric Value In DOB! (Allowed input:0-9)")
// return false;
// }
if ($("#txtAge").val().length > 2) {
alert("Age Should be Less than 100.");
return false;
}
if ($("#ddlGroup option:selected").val() == 0) {
alert("Please Select Group!");
$("#ddlGroup").focus();
return false;
}
username[len] = $("#txtName").val().toUpperCase();
fnAddDetails();
return true;
}
function fnAddDetails() {
debugger;
var content = {};
content.name = $("#txtName").val();
content.dob = $("#txtDOB").val();
content.group = $("#ddlGroup option:selected").text();
content.active = "No";
if ($("#chkActive").attr("checked")) {
content.active = "Yes";
}
var jsonText = JSON.stringify(content);
debugger;
$.ajax({
type: "POST",
url: "Test_sspl142_jQuery_JavaScript.aspx/GetDate",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: jsonText,
success: function(data) {
debugger;
var dataget = $.parseJSON(data.d);
jQuery("#tblData").jqGrid({
datatype: 'json',
colNames: ['name', 'group', 'active', 'age'],
colModel: [
{ name: 'name', width: 60 },
{ name: 'group', width: 90 },
{ name: 'active', width: 100 },
{ name: 'age', width: 80, align: "right" },
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager3',
viewrecords: true,
loadonce: true
});
},
error: function(ex) {
alert("Error Occured while saving data in grid...");
console.log(ex);
}
});
}
Answer
jQuery.browser = {};
(function () {
jQuery.browser.msie = false;
jQuery.browser.version = 0;
if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
jQuery.browser.msie = true;
jQuery.browser.version = RegExp.$1;
}
})();
no need of the jquery migrate plugin just put this code in script tag Above the jquery.grid.js