Mesh reload does not work for multiple jqgrid

Question

I am using jqgrid. My page has three tabs, and each tab contains a different grid. All grids have different identifiers. Tab content is queried using an AJAX request lazily. Now after all three grids are displayed, and I try to reload the grid through the function

jQuery("#myOffersTable").trigger('reloadGrid'); 

Only a grid that loads the last reboot, and does not work for other grids.

For example, if the load seq grid is: 1-2-3, then this code will work only for grid 3, but if seq is 3-2-1, then it will work only for 1.

But if I try to reload the grids using the reload button on the navigation bar, it works fine.

Update:

I use 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, everyone has different identifiers and all that.

Each grid has a search button that calls the following function with the sel.sel parameter: 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 is called for each grid, but

 jQuery("#acceptedtable").trigger('reloadGrid'); 

only works for the last loaded grid.

Answer 1

First of all, in your code you define the variables myTradeOfferGame and acceptedTradeOfferGame (inside else if(sel==2) and else if(sel==3) ), but use myTradeOffer and acceptedTradeOffer . This is like bugs.

Second: URLs inside else if(sel==2) and else if(sel==3) look the same as in the first table: URLs are static, so why do I need to set this value each time? Perhaps you want to add a part to all urls using $("#srchoptions").val() ? You must solve this problem yourself.

You can see in your code that you are using $.ajaxSetup , which change the global settings of $.ajax . If you change this value to 3, only the last will be saved. If only one of the three settings works with a single update, $.ajaxSetup not the best way, however. jqGrid has an ajaxGridOptions parameter that sets the $.ajax parameters for each table (see Configuring the type of content of queries executed by jQuery jqGrid ).

Moreover, jqGrid (each instance) has a postData parameter that will be redirected to $.ajax as the data parameter. So you can use this parameter in your jqGrid definition. If you want the data that you put as postData to be reloaded during each trigger('reloadGrid') , you can simply define postData using a function. The default behavior of $.ajax is to check if the data parameter field is a function, as it is, $.ajax calls this function to get the value. So your code might look like this:

 // definition of 3 jqGrids jQuery("#offerstable").jqGrid ({ postData: {'gameId': function() { return $("#games").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ postData: {'gameId': function() { return $("#my").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ postData: {'gameId': function() { return $("#accepted").val(); } }, //... }); if(sel==1) { jQuery("#offerstable") .jqGrid('setGridParam', {url:"offers.action?q=1&srch="+encodeURIComponent($("#srchoptions").val()), page:1}) .trigger('reloadGrid'); } else //... // ... 

By the way, if you use HTTP GET to request data, the parameters from the data ( postData ) parameter will simply be added to the URL (with the location '?' And '&' as usual).

The final code might be something like this:

 // definition of 3 jqGrids jQuery("#offerstable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#games").val(); }, 'srch': function() { return $("#srchoptions").val(); }, //... }); jQuery("#myOffersTable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#my").val(); } }, //... }); jQuery("#myOffersTable").jqGrid ({ url:"offers.action", postData: {'q': 1, 'gameId': function() { return $("#accepted").val(); } }, //... }); 

and

 if(sel==1) { jQuery("#offerstable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); } else if (sel==2) { jQuery("#myOffersTable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); } else if (sel==3) { jQuery("#acceptedtable").jqGrid('setGridParam',{page:1}).trigger('reloadGrid'); }