First time JQGrid does not fire reload event - jqgrid

Question

I have multiple grids in a page which are shown based on a drop down selection. The first time when the page is loaded and I select another grid name in the drop down that grid's data reload event is not fired but subsequent events fire properly. Can someone let me know what is the problem with first time event not getting fired?
The flow of the execution is as follows
On the page load all the grids numbered 2 to 4 are initialized without any URL. And grid 1 is loaded with data and shown to the user.
Also on page load other grid divs are hidden.
When a user selects any other grid name in the drop down that grids div is shown and a reload event is fired to load data with URL.
HTML code
<select id="gridType" onchange="javascript:onChangeGridType();">
<option value="1" selected="selected">Grid 1</option>
<option value="2">Grid 2</option>
<option value="3">Grid 3</option>
<option value="4">Grid 4</option>
</select>
<div id="grid1Div">
<table id="grid1">
<tr>
<td />
</tr>
</table>
<div id="pager1"></div>
</div>
<div id="grid2Div">
<table id="grid2">
<tr>
<td />
</tr>
</table>
<div id="pager2"></div>
</div>
<div id="grid3Div">
<table id="grid3">
<tr>
<td />
</tr>
</table>
<div id="pager3"></div>
</div>
<div id="grid4Div">
<table id="grid4">
<tr>
<td />
</tr>
</table>
<div id="pager4"></div>
</div>
Grid 1 initialization code
$("#grid1").jqGrid({
url: grid1URL,
datatype: 'json',
mtype: 'GET',
colNames:['column1',
'column2',
'column3'
],
colModel:[
{name:'col1',index:'col2',
width:140,sortable:true,editable:true},
{name:'col2',index:'col2',
width:120,sortable:true,editable:true},
{name:'col3',index:'col3',
width:160,sortable:true,editable:true}
],
pager: '#pager1',
paging:true,
rowNum:perPageRecords,
height:'auto',
loadonce: true,
sortorder: 'desc',
sortname:'col2',
viewrecords: true,
caption: 'Grid 1',
gridview:true,
width:'100%',
autowidth:true,
pginput:true,
ignoreCase:true,
shrinkToFit:false
});
$("#grid1").jqGrid('navGrid',"#pager1",{add:false, edit:false, del:false, search:true, refresh:true,
beforeRefresh: function(){....}},{},{},{},{});
Grid 2 initialization code
$("#grid2").jqGrid({
url: "",
datatype: 'json',
mtype: 'GET',
colNames:['column1',
'column2',
'column3'
],
colModel:[
{name:'col1',index:'col2',
width:140,sortable:true,editable:true},
{name:'col2',index:'col2',
width:120,sortable:true,editable:true},
{name:'col3',index:'col3',
width:160,sortable:true,editable:true}
],
pager: '#pager2',
paging:true,
rowNum:perPageRecords,
height:'auto',
loadonce: true,
sortorder: 'desc',
sortname:'col2',
viewrecords: true,
caption: 'Grid 2',
gridview:true,
width:'100%',
autowidth:true,
pginput:true,
ignoreCase:true,
shrinkToFit:false
});
$("#grid2").jqGrid('navGrid',"#pager2",{add:false, edit:false, del:false, search:true, refresh:true,
beforeRefresh: function(){....}},{},{},{},{});
Grid 3 initialization code
$("#grid3").jqGrid({
url: "",
datatype: 'json',
mtype: 'GET',
colNames:['column1',
'column2',
'column3'
],
colModel:[
{name:'col1',index:'col2',
width:140,sortable:true,editable:true},
{name:'col2',index:'col2',
width:120,sortable:true,editable:true},
{name:'col3',index:'col3',
width:160,sortable:true,editable:true}
],
pager: '#pager3',
paging:true,
rowNum:perPageRecords,
height:'auto',
loadonce: true,
sortorder: 'desc',
sortname:'col2',
viewrecords: true,
caption: 'Grid 3',
gridview:true,
width:'100%',
autowidth:true,
pginput:true,
ignoreCase:true,
shrinkToFit:false
});
$("#grid3").jqGrid('navGrid',"#pager3",{add:false, edit:false, del:false, search:true, refresh:true,
beforeRefresh: function(){....}},{},{},{},{});
Grid 4 initialization code
$("#grid4").jqGrid({
url: "",
datatype: 'json',
mtype: 'GET',
colNames:['column1',
'column2',
'column3'
],
colModel:[
{name:'col1',index:'col2',
width:140,sortable:true,editable:true},
{name:'col2',index:'col2',
width:120,sortable:true,editable:true},
{name:'col3',index:'col3',
width:160,sortable:true,editable:true}
],
pager: '#pager4',
paging:true,
rowNum:perPageRecords,
height:'auto',
loadonce: true,
sortorder: 'desc',
sortname:'col2',
viewrecords: true,
caption: 'Grid 4',
gridview:true,
width:'100%',
autowidth:true,
pginput:true,
ignoreCase:true,
shrinkToFit:false
});
$("#grid4").jqGrid('navGrid',"#pager4",{add:false, edit:false, del:false, search:true, refresh:true,
beforeRefresh: function(){....}},{},{},{},{});
onChangeGridType function
function onChangeGridType(){
var type = $("#gridType").val();
if (type == 1){
reloadGrid1();
$("#grid1Div").show();
$("#grid2Div").hide();
$("#grid3Div").hide();
$("#grid4Div").hide();
$("#grid1Div").css("visibility", "visible");
$("#grid2Div").css("visibility", "hidden");
$("#grid3Div").css("visibility", "hidden");
$("#grid4Div").css("visibility", "hidden");
} else if (type == 2){
reloadGrid2();
$("#grid1Div").hide();
$("#grid2Div").show();
$("#grid3Div").hide();
$("#grid4Div").hide();
$("#grid1Div").css("visibility", "hidden");
$("#grid2Div").css("visibility", "visible");
$("#grid3Div").css("visibility", "hidden");
$("#grid4Div").css("visibility", "hidden");
} else if (type == 3){
reloadGrid3();
$("#grid1Div").hide();
$("#grid2Div").hide();
$("#grid3Div").show();
$("#grid4Div").hide();
$("#grid1Div").css("visibility", "hidden");
$("#grid2Div").css("visibility", "hidden");
$("#grid3Div").css("visibility", "visible");
$("#grid4Div").css("visibility", "hidden");
} else if (type == 4) {
reloadGrid4();
$("#grid1Div").hide();
$("#grid2Div").hide();
$("#grid3Div").hide();
$("#grid4Div").show();
$("#grid1Div").css("visibility", "hidden");
$("#grid2Div").css("visibility", "hidden");
$("#grid3Div").css("visibility", "hidden");
$("#grid4Div").css("visibility", "visible");
}
}
'reload functions`
function reloadGrid1() {
$("#grid1").jqGrid('setGridParam',{datatype : 'json',url : grid1URL}).trigger('reloadGrid', [ {page : 1} ]);
}
function reloadGrid2() {
$("#grid2").jqGrid('setGridParam',{datatype : 'json',url : grid2URL}).trigger('reloadGrid', [ {page : 1} ]);
}
function reloadGrid3() {
$("#grid3").jqGrid('setGridParam',{datatype : 'json',url : grid3URL}).trigger('reloadGrid', [ {page : 1} ]);
}
function reloadGrid4() {
$("#grid4").jqGrid('setGridParam',{datatype : 'json',url : grid4URL}).trigger('reloadGrid', [ {page : 1} ]);
}

Answer 1

For other grids I changed the grid URL value to empty and datatype as "local" that did the trick.