Using jqGrid 4.7.1, jquery 1.9.1 & jquery-ui 1.10.4 in Visual Studio Express 2012 for Web and publishing a page as a default website on my localhost. IIS version is 7.5. The package loads XML from a static file into a grid that can be searched.
I am able to debug the page in VS Express 2012 for Web in any browser without errors. When I publish it, it is deployed in IIS via right-clicking on the Default Web Site --> Deploy --> Import Application. The defaults are taken when the package is deployed. Since I'm installing over an existing application, the option "No, just append the files in the application package to the destination." is selected. The package deploys successfully, and IIS is re-started.
Using current versions of Chrome & Firefox without an issue. The site works fine & the grid loads without issue in IE11 when accessed via the URL http://localhost/myWebSite. However, I get the following error in IE only when accessing the site via the machine name URL: http://mymachine/myWebSite
The error produced is: SCRIPT5007: Unable to get property 'innerHTML' of undefined or null reference. File: jquery.jqGrid.min.js, Line: 64, Column: 205
The error is produced when the grid is being loaded. I show the grid header, footer and column headings, and the "Loading" message when the error is produced. The grid functions perfectly using other browsers using either the localhost or machine name URL. It can be accessed by other users using the http://mymachine/myWebSite URL as long as they are not on IE10 or IE11 (I am unable to test other versions of IE).
I am reasonably sure that the jqGrid is set up properly. The colModel contains name, xmlmap, & width on all columns, except for 3. Two of those have an index, sorttype, formatter, formatoptions in them, and the third has a custom formatter in it (hyperlink to a pdf).
Any idea as to what the problem could be, or a way to fix it? Any input would be appreciated.
EDIT
I changed it to use the jquery.jqGrid.src.js script and ran it on Firefox & Chrome with no issues. IE though produces the same SCRIPT5007 error. It is at line 1447, column 6, which is on this line of code:
ts.firstElementChild.innerHTML += rowData.join(''); // append to innerHTML of tbody which contains the first row (.jqgfirstrow)
My jqGrid code, which is pretty plain:
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" });
};
The structure of the data is below. The attribute setEntry is a unique number in the XML file.
<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>
Again, the error does NOT occur when using the http://localhost/myWebSite URL, it only occurs when I use the http://mymachine/myWebSite URL. And, it occurs in IE only - Firefox & Chrome have no problems with the code, regardless of the URL used.
EDIT #2
I found a workaround here.
The change was made in my Site.Master file, changing the meta tag in it. It had been this:
<head runat="server">
<meta charset="utf-8" />
and I changed it to:
<head runat="server">
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" />
which seems to run the http://mymachine/myWebSite URL in IE without the error occurring, and does not seem to cause other issues.
This is just a workaround, not necessarily a solution.
EDIT 3
@Oleg - here is the code using the free 4.7 version found in the jquery-master zip file at the link.
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();
};
The HTML portion of the page is now:
<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>
All of the links & scripts:
<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"/>
The above configuration will load the grid without any problem. However, when the Search button is clicked, an error occurs in jquery-1.9.1.js on line 622 column 3. The statement is length = obj.length, and the error is TypeError: obj is undefined.
