未捕获的类型错误 - 无法读取 jQgrid 中未定义的属性“msie”

Question

对不起，重复的问题，但以前对此类问题的回答没有给我解决方案。

我做了以下工作： - 使用jQGrid 3.5.3

包含的js文件有：

<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>

我在jquery.jqGrid.min.js 中遇到上述错误。

HTML 代码

<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>

我的脚本代码是：

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 1

 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;
       }
   })();

不需要jquery migrate插件，只需将此代码放在jquery.grid.js上方的脚本标记中

Answer 2

尝试在这里颠倒顺序：

<script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Script/jquery.jqGrid.min.js" type="text/javascript"></script>

您需要在jQgrid 之前加载jQuery。同样正如@Todd Motto 指出的那样，您只需要包含jQuery 一次，而不是像现在这样的两次。我建议你使用1.9.1 的版本，因为1.3.2 已经很老了，缺少很多功能，你可能还会面临跨浏览器的兼容性问题。