Reload Grid not working for multiple jqgrid

Question

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.

Answer 1

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

Second: The urls inside of else if(sel==2) and else if(sel==3) look another as in the first table: URLs are static, so why one should set this value every time? Probably you want to add in all urls the part with $("#srchoptions").val()? You should fix these problem yourself.

In your code one can see, that you use $.ajaxSetup which change global settings of $.ajax. If you change this 3 times only the last one will be saved. If only one from three setting work at one refresh, $.ajaxSetup is nevertheless not the best way. jqGrid has parameter ajaxGridOptions, which set parameters of $.ajax per table (see Setting the content-type of requests performed by jQuery jqGrid).

Moreover jqGrid (every instance) has a parameter postData, which will be forward to $.ajax as data parameter. So you can use this parameter in the jqGrid definition. If you want that the data which you place as postData will be reloaded during every trigger('reloadGrid') you can just define postData using function. The default behavior of $.ajax is to test whether the field of data parameter is function, it it is so, $.ajax call this function the get the value. So your code could look like following:

// 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 for data request, the parameters from data parameter (postData) will be just appended to the url (with placing '?' and '&' like one do this usual).

The final code can be something like following:

// 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');
}