I am using jqgrid. My page has three tabs and each tab contains a different grid. All grids have different ids. The content of tabs is fetched via AJAX request lazily. Now after all three grids are rendered and I try to reload grid via function
jQuery("#myOffersTable").trigger('reloadGrid');
Only the grid which loaded last reloads and it doesn't work for other grids.
For example, if grids load seq is : 1-2-3 then this code will only work for grid 3 but if seq is 3-2-1 then it will work only for 1.
But if I try reloading grids using reload button on navigator bar it works fine.
Update:
I am using Struts2 jQuery Plugin.It uses jqGrid 3.6.4 I load json data using ajax.
Below is the definition of my grid.
<div id='t1'>
<s:url id="offersurl" action="offers"/>
<sjg:grid
id="offerstable"
caption="Customer Examples"
autoencode="false"
dataType="json"
href="%{offersurl}"
pager="true"
navigator="true"
navigatorAdd="false"
navigatorDelete="false"
navigatorEdit="false"
navigatorSearch="false"
gridModel="offers"
rowList="10,15,20"
rowNum="15"
rownumbers="true"
onCompleteTopics="addAcceptButtons"
filter="true"
>
<sjg:gridColumn name="id" index="id" title="ID" formatter="integer" sortable="false" search="false"/>
<sjg:gridColumn name="offeror" index="offeror" title="Offeror" sortable="true" search="false"/>
<sjg:gridColumn name="itemOffered" index="itemOffered" title="ItemOffered" sortable="false" search="true" searchoptions="{sopt:['eq']}"/>
<sjg:gridColumn name="quantityOffered" index="quantityOffered" title="QuantityOffered" sortable="false" search="true" searchoptions="{sopt:['eq','lt','gt']}"/>
<sjg:gridColumn name="expectedItem" index="expectedItem" title="ExpectedItem" sortable="false" search="true" searchoptions="{sopt:['eq']}"/>
<sjg:gridColumn name="expectedQuantity" index="expectedQuantity" title="ExpectedQuantity" sortable="false" search="true" searchoptions="{sopt:['eq','lt','gt']}"/>
<sjg:gridColumn name="acceptOffer" index="acceptOffer" title="Accept Offer" search="false"/>
</sjg:grid>
</div>
I have three such grids all have different ids and all that stuff.
There is a search button above each grid which calls the following function with parameter sel.sel is 1,2 or 3 corresponding to each grid
function search(sel)
{
alert("search");
if(sel==1)
{
tradeOffer = $("#games").val();
var srchValue = $("#srchoptions").val();
$.ajaxSetup({
data: {'gameId': tradeOffer},
});
jQuery("#offerstable").jqGrid('setGridParam',{url:"offers.action?q=1&srch="+srchValue,page:1});
//jQuery("#offerstable").trigger('reloadGrid');
$("#offerstable").trigger("reloadGrid");
}
else if(sel==2)
{
myTradeOfferGame = $("#my").val();
$.ajaxSetup({
data: {'gameId': myTradeOffer},
});
jQuery("#myOffersTable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1});
jQuery("#myOffersTable").trigger('reloadGrid');
}
else if(sel==3)
{
acceptedTradeOfferGame = $("#accepted").val();
$.ajaxSetup({
data: {'gameId': acceptedTradeOffer},
});
jQuery("#acceptedtable").jqGrid('setGridParam',{url:"offers.action?q=1",page:1});
jQuery("#acceptedtable").trigger('reloadGrid');
}
}
The function gets called for each grid but
jQuery("#acceptedtable").trigger('reloadGrid');
works for only grid loaded last.