jqGrid - 在 IE 中产生 SCRIPT5007 错误，但在 localhost 上工作答案

【问题标题】：jqGrid - Produces SCRIPT5007 error in IE, but works on localhostjqGrid - 在 IE 中产生 SCRIPT5007 错误，但在 localhost 上工作
【发布时间】：2015-04-22 08:59:57
【问题描述】：

在 Visual Studio Express 2012 for Web 中使用 jqGrid 4.7.1、jquery 1.9.1 和 jquery-ui 1.10.4，并在我的本地主机上将页面发布为默认网站。 IIS 版本是 7.5。该包将 XML 从静态文件加载到可以搜索的网格中。

我可以在任何浏览器中调试 VS Express 2012 for Web 中的页面而不会出错。当我发布它时，它通过右键单击默认网站 --> 部署 --> 导入应用程序部署在 IIS 中。部署包时采用默认值。由于我在现有应用程序上进行安装，因此选择了“否，只需将应用程序包中的文件附加到目标位置。”选项。包部署成功，IIS 重新启动。

使用当前版本的 Chrome 和 Firefox 没有问题。当通过 URL http://localhost/myWebSite 访问时，该网站运行良好，并且在 IE11 中加载网格没有问题。但是，通过机器名称 URL 访问站点时，IE only 中出现以下错误：http://mymachine/myWebSite

产生的错误是： SCRIPT5007：无法获取未定义或空引用的属性“innerHTML”。文件：jquery.jqGrid.min.js，行：64，列：205

加载网格时会产生错误。我显示了网格页眉、页脚和列标题，以及产生错误时的“正在加载”消息。使用 localhost 或 machine name URL 的其他浏览器可以完美地运行网格。其他用户可以使用 http://mymachine/myWebSite URL 访问它，只要他们不在 IE10 或 IE11 上（我无法测试其他版本的 IE）。

我有理由确定 jqGrid 设置正确。 colModel 包含除 3 之外的所有列的名称、xmlmap 和宽度。其中两个具有索引、排序类型、格式化程序、格式选项，第三个具有自定义格式化程序（指向 pdf 的超链接）。

您知道问题可能是什么，或者有解决方法吗？任何输入将不胜感激。

编辑

我将其更改为使用 jquery.jqGrid.src.js 脚本并在 Firefox 和 Chrome 上运行它，没有任何问题。 IE 虽然会产生相同的 SCRIPT5007 错误。它在第 1447 行第 6 列，也就是这行代码：

ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow)

我的 jqGrid 代码，非常简单：

 var createGrid = function () {
     $("#myGrid").jqGrid({
         url: "mydata.xml",
         xmlReader: {
  repeatitems: false,
  root: "Recordset",
  row: "Record",
  id: "[setEntry]"
         },
         dataType: "xml",
         colNames: [
  "Product",
  "Manufacturer",
  "Date Created",
  "Date Modified",
  "Image Link",
         ],
         colModel: [
  { name: "PROD_NAME", xmlmap: "Recordset>Record>PROD_NAME" },
  { name: "MFR", xmlmap: "Recordset>Record>MFR", width:175 },
  { name: "DATE_CREATED", xmlmap: "Recordset>Record>DATE_CREATED", width:125, index: "DATE_CREATED", sorttype:"date", formatter: "date", formatoptions: {srcformat:"F d, Y H:i:s", newformat:"Y-m-d H:i:s"}, datefmt:"Y-m-d H:i:s" },
  { name: "DATE_MODIFIED", xmlmap: "Recordset>Record>DATE_MODIFIED", width:125, index: "DATE_MODIFIED", sorttype: "date", formatter: "date", formatoptions: { srcformat: "F d, Y H:i:s", newformat: "Y-m-d H:i:s" }, datefmt: "Y-m-d H:i:s" },
  {
      name: "IMAGE", xmlmap: "Recordset>Record>IMAGE", width:100,
      formatter: function (cellValue, options, rowObject) {
         return '<a href="../Work_Documents/' + cellValue + '" target="_blank" >' + cellValue + '</a>';
    }
  }
         ],
         rowNum: 10,
         pager: jQuery("#pager1"),
         gridview: true,
         rownumbers: false,
         height: "auto",
         loadonce: true,
         autoencode: true,
         caption: "MyGrid",
         ignoreCase: true, // default is case-sensitive, this makes it case-insensitive
         hidegrid: false,
         altrows: true,
         recordtext: "View {0} - {1} of {2}",
         emptyrecords: "No Records to View",
         pgtext: "Page {0} of {1}"
     }).navGrid("#pager1", { edit: false, add: false, del: false}, {},{},{}, {multipleSearch: true, multipleGroup: true}, {searchtext: "Search" });
 };

数据结构如下。属性 setEntry 是 XML 文件中的唯一编号。

<Recordset>
   <Record setEntry="1">
      <PROD_NAME>MyProduct</PROD_NAME>
      <MFR>ABC D and Company</MFR>
      <DATE_CREATED>September 30, 2014 14:41:36</DATE_CREATED>
      <DATE_MODIFIED>September 30, 2014 14:50:55</DATE_MODIFIED>
      <IMAGE>abcd.pdf</IMAGE>
   </Record>
</Recordset>

同样，错误NOT在使用http://localhost/myWebSite URL时发生，它仅在我使用http://mymachine/myWebSite URL时发生.而且，它只出现在 IE 中——无论使用什么 URL，Firefox 和 Chrome 的代码都没有问题。

编辑#2

我找到了解决方法here。

在我的 Site.Master 文件中进行了更改，更改了其中的 meta 标记。原来是这样的：

<head runat="server">
   <meta charset="utf-8" />

我把它改成了：

<head runat="server">
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />

这似乎在 IE 中运行 http://mymachine/myWebSite URL 没有发生错误，并且似乎不会导致其他问题。

这只是一种解决方法，不一定是解决方案。

编辑 3

@Oleg - 这是使用链接中 jquery-master zip 文件中的免费 4.7 版本的代码。

 var createGrid = function () {
     $("#myGrid").jqGrid({
         url: "mydata.xml",
         xmlReader: {
  repeatitems: false,
  root: "Recordset",
  row: "Record",
  id: "[setEntry]"
         },
         datatype: "xml",
         colNames: [
  "Product",
  "Manufacturer",
  "Date Created",
  "Date Modified",
  "Image Link",
         ],
         colModel: [
  { name: "PROD_NAME", xmlmap: "Recordset>Record>PROD_NAME" },
  { name: "MFR", xmlmap: "Recordset>Record>MFR", width:175 },
  { name: "DATE_CREATED", xmlmap: "Recordset>Record>DATE_CREATED", width:125, index: "DATE_CREATED", sorttype:"date", formatter: "date", formatoptions: {srcformat:"F d, Y H:i:s", newformat:"Y-m-d H:i:s"}, datefmt:"Y-m-d H:i:s" },
  { name: "DATE_MODIFIED", xmlmap: "Recordset>Record>DATE_MODIFIED", width:125, index: "DATE_MODIFIED", sorttype: "date", formatter: "date", formatoptions: { srcformat: "F d, Y H:i:s", newformat: "Y-m-d H:i:s" }, datefmt: "Y-m-d H:i:s" },
  {
      name: "IMAGE", xmlmap: "Recordset>Record>IMAGE", width:100,
      formatter: function (cellValue, options, rowObject) {
         return '<a href="../Work_Documents/' + cellValue + '" target="_blank" >' + cellValue + '</a>';
    }
  }
         ],
         rowNum: 10,
         pager: true,
         gridview: true,
         rownumbers: false,
         height: "auto",
         loadonce: true,
         autoencode: true,
         caption: "MyGrid",
         ignoreCase: true, 
         hidegrid: false,
         altrows: true,
         recordtext: "View {0} - {1} of {2}",
         emptyrecords: "No Records to View",
         pgtext: "Page {0} of {1}",
         navOptions: {
              edit: false,
              add: false,
              del: false,
              searchtext: "Search"
              },
         searching: {
              multipleSearch: true,
              multipleGroup: true
              }
     }).navGrid();
 };

页面的 HTML 部分现在是：

<div id="UpdatePanel" style ="padding:20px 10px">
    <table id="myGrid" border="0" cellpadding="0" cellspacing="0" style="width:100%">
        <tr>
            <td></td>
        </tr>
    </table>        
</div>

所有链接和脚本：

<link href="Scripts/jquery-ui-1.10.4.custom/css/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jqGrid-master/css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.js" type="text/javascript"></script>
<script src="Scripts/jqGrid-master/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jqGrid-master/js/jquery.jqGrid.src.js" type="text/javascript"></script>
<link href="CustomFormatter.css" rel="stylesheet" type="text/css"/>

以上配置将加载网格没有任何问题。但是，当点击Search按钮时，jquery-1.9.1.js第622行第3列出现错误。语句为length = obj.length,，错误为TypeError: obj 未定义。

【问题讨论】：

如果您发布错误报告，您应该始终使用jquery.jqGrid.src.js 而不是jquery.jqGrid.min.js 并在文件中发布错误的行号。您应该将所有代码都放在问题的文本中。顺便问一下，你在代码中使用了 jqGrid 的getCol 方法吗？您使用的第一个参数的值（名称或列号）？
@Oleg - 请参阅上面对网格代码、数据和结果错误进行的编辑（与以前相同，但在不同的行）。
我发布了我的答案（见下文）。我建议您另外考虑将输入数据的格式从 XML 更改为 JSON（仅当您的组件生成数据时才会这样做）。 jQuery 和 jqGrid 包含非常有限且相对较慢的解析 XML 数据的可能性。所以 JSON 的使用只会带来好处。顺便说一句，dataType: "xml" 选项将被忽略（因为它的名称错误），jqGrid 将使用默认的datatype: "xml" 选项。
@Oleg - 感谢您发现我的错误并纠正我。我已经更改了该代码。我希望我可以使用 JSON，但不幸的是，XML 是我作为数据源可用的唯一选项。

标签： javascript jquery asp.net iis jqgrid

【解决方案1】：

您似乎在不同版本的 IE 上进行了测试。 IE10-IE11使用ts.firstElementChild.innerHTML应该没有问题，但是旧版IE不支持firstElementChild属性。您应该关注the answer 或this one。您可以从here 下载 jqGrid 4.7 的固定版本，或者从我的 fork here 下载新的免费 jqGrid 版本的新 beta 版本。我计划很快发布新版本的 jqGrid。

【讨论】：

我在 IE10 和 IE 11 上都进行了测试。在阅读您的修复程序时，我对版本感到困惑。我从 Tony 的网站下载了 4.7.1，我看到你的版本是基于 4.7.0 的。我比较了两者的代码，您的修复不在 4.7.1 版本中。我计算了 5 个存在代码差异的地方，其中 4 个（尚未）在您的版本中。您的发布目标是什么时候？
@steve_o：在每次更改主代码期间，我也会生成jquery.jqGrid.src.js、jquery.jqGrid.min.js 和jquery.jqGrid.min.map 文件。因此，您可以从here 下载免费 jqGrid 的当前状态，然后将这些文件与您需要的语言环境文件grid.locale-XX.js 一起使用。顺便说一句，4.7.1 版本几乎与 4.7 相同，但 4.7 是免费的，需要为 4.7.1 付费（请参阅Guriddo jqGrid JS 的价格）
感谢您的澄清。并且一如既往地感谢您的帮助。
我下载了免费的 jqGrid 并在我的代码中替换了 4.71 版本，但是当我单击按钮加载网格时得到错误 jqGrid 不是函数。我使用的代码是$("btnGetData").click(function() { $("myGrid").jqGrid('GridUnload'); createMyGrid(); });，它创建了上面的网格。我有 2 个按钮，每个按钮将一个单独的数据源加载到基本相同的网格中。上面的代码用于卸载网格并加载特定的网格。我已经检查以确保正确引用了通常的东西（grid.locale-en.js 和 jquery.jqGrid.js）。想法？
我把你的代码一字不差地放进去；但是，当我单击“搜索”链接时，jQuery-1.9.1.js 给出了错误（第 622 行，第 3 列）length = obj.length,。我在pgtext 选项的末尾添加了您上面消息中的代码，还将pager 选项更改为true，并从页面中删除了<div id="pager1"></div>。我是否缺少其他设置？

【解决方案2】：

也许与您在 IE 中的安全区域有关。转到工具-> Internet 选项；然后到安全选项卡。检查http://mymachine 是否在 localhost 所在的同一区域中。

您也可以尝试将http://mymachine 添加到受信任的站点。

最后，我还努力将 about: 添加到受信任的站点区域

【讨论】：

这些设置已为我锁定。 FWIW，mymachine 不在受信任的站点列表中。