Question

I am trying to implement a jqGrid in my site. Everything works fine when i load it once but when i rerun the function to load the data it doesnt update. What i did was removed the table and then added it again before I update it. This worked in Mozilla but when i run it in IE it crashes. here is the code I have:

<div id="tabs-3">

                    <table id="userStatistics" style="width:100%">

                    </table><div id="pager1"></div>

                </div>

And here is the function that adds the grid.

function generateSummaryStatistics(app, range) {
 /*$("#gbox_userStatistics").remove();
 $("#pager1").remove();*/
 $("#tabs-3").html('<table id="userStatistics" style="width:100%"></table><div id="pager1"></div>');
 $("#userStatistics").jqGrid({
     url:"/WebServiceURL/GetLogMetricCountinputReportName="+app+"&startLogDate="+range,
     datatype: 'xml',
     mtype: 'GET',
     colNames:['Date','User','Department','Application','Number Times Run'],
        colModel: [{name:'logDate', index:'logDate',xmlmap:'logDate'},
        {name:'reportUserName', index:'reportUserName',xmlmap:'reportUserName'},
        {name:'departmentNumber', index:'departmentNumber',xmlmap:'departmentNumber'},
        {name:'reportName', index:'reportName',xmlmap:'reportName'},
        {name:'numOfQueries', index:'numOfQueries',xmlmap:'numOfQueries'}],
             xmlReader: { 
                   root:"returnList", 
                   row:"UsageMetricsDTO",
                   repeatitems:false,
                   id : "departmentNumber"
               },
                 rowNum:10,
                 rowList:[10, 20, 30, 40, 50],
                 shrinkToFit:false,
                 viewrecords: true,
                 loadonce: true,
                 caption: 'Summary Statistics',
                 pager: $('#pager1'),
                 autoWidth:true,
                 multiselect:false,
                 gridview: true,
                 emptyrecords: "No records Found"
             }).navGrid('#pager1',{edit:false,add:false,del:false});
 $('.ui-jqgrid-bdiv').css({height: 'auto', 'max-height': 250});

}

Any idea why this would cause IE to crash.

Like I said it works fine in Mozilla but once its run for a second time in IE it crashes. I’m not seeing any errors in the console in firebug either or in the eclipse console.

Can anyone help or suggest a better way to do this?

Thanks,

Craig

Answer 1

I am not sure why IE crash, but you can do the same work in a little other way and all should work without any problems.

First it’s important to understand, that jqGrid construct some additional divs over the <table> element. jqGrid provide special method GridUnload to destroy old grid and to place initial <table> an the pager <div>. So you should better use

$("#userStatistics").jqGrid('GridUnload');

instead of $("#tabs-3").html(...);.

In the most cases one should do this only if you need to create another grid on the same place. For example in the answer and this one one changes the number of columns in the grid. So one uses the method.

In your case what you need to do is just reloading the grid body with another data. In the case much more effective would be to create the grid only once, and all next times just change the url and reload the grid body. Because you use loadonce: true it follows to changing the datatype to 'local' after the first grid load. So you should reset the datatype to the original 'xml' value additionally to resetting 'url'. The corresponding code will be

$("#userStatistics").jqGrid('setGridParam', {
    url: newUrlValue,
    datatype: 'xml'
}).trigger("reloadGrid", [{page: 1}]);