Grid not working after reloading on alternate calls - jqgrid

Question

$("#tableVisualization").jqGrid('GridUnload');
$("#tableVisualization").jqGrid({
datatype: "local",
mtype: 'GET',
colNames: this.GetGridColumnNames(),
colModel: this.GetGridColumnModel(),
height: "100%",
autowidth: true,
shrinkToFit: true,
sortname: 'monthID',
sortorder: "desc",
rowList: [6, 12],
rowNum: 12,
pager: $('#pager3'),
viewrecords: true,
recordpos: "left",
caption: "Table"
});
//local data array used for example
var data = this.GetGridData();
//FUNCTION CALL
//populate grid with data
$("#tableVisualization").jqGrid("addRowData", "month", data);
$("#tableVisualization").trigger("reloadGrid");
$("#tableVisualization").setGridWidth(1040, true);
Above code works fine.
However if I assign $("#tableVisualization") to a variable and use the variable in the above code it does not work.
//var grid = $("#tableVisualization");
It works every alternate call.
For example if the whole code was inside a javascript method called LoadGrid(), then the first call to the method works, second call does not, third works, fourth does not and so on.
I have seen during debugging, when it reached "grid.jqGrid('GridUnload')" on the even calls, the grid is completely removed(im not sure if the html table is removed or not) and it is not created during "$("#tableVisualization").jqGrid({.....});".
Can anyone please explain me the reason for this behaviour.
I can make the scenario work because now I am not using a local variable but I would like to know why it does not work?

Answer 1

We can see exactly what is going on within the grid's GridUnload method in grid.custom.js:
GridUnload : function(){
return this.each(function(){
if ( !this.grid ) {return;}
var defgrid = {id: $(this).attr('id'),cl: $(this).attr('class')};
if (this.p.pager) {
$(this.p.pager).empty().removeClass("ui-state-default ui-jqgrid-pager corner-bottom");
}
var newtable = document.createElement('table');
$(newtable).attr({id:defgrid.id});
newtable.className = defgrid.cl;
var gid = $.jgrid.jqID(this.id);
$(newtable).removeClass("ui-jqgrid-btable");
if( $(this.p.pager).parents("#gbox_"+gid).length === 1 ) {
$(newtable).insertBefore("#gbox_"+gid).show();
$(this.p.pager).insertBefore("#gbox_"+gid);
} else {
$(newtable).insertBefore("#gbox_"+gid).show();
}
$("#gbox_"+gid).remove();
});
},
The key points to understand are:
A new table element is inserted with the same DOM id as the old table. We can see it created in the call to document.createElement('table') and inserted in one of the calls to insertBefore.
The existing jqGrid DOM is removed in the call to $("#gbox_"+gid).remove(). Since the old table element is contained within the gbox, it is removed as well.
After the call to GridUnload, the DOM element that it refers to no longer exists on the page, so any code that references the element is ineffective.
Does that help?