Refreshing a jqgrid on a menu item click, getting data from a different URL

Question

This is a followup to my earlier question posted here. I have my grid showing up correctly now, thanks to the answer by Oleg. However, now I need to refresh the data in the jqgrid with a different URL on a bootstrap menu item click. Following is my code:

$("#menuitem").click(function(e){
$("#grid").jqGrid('setGridParam', {url: '/getdata?id=1234&name=val.text'});
    $('#grid').trigger("reloadGrid");
});

The menu options are added dynamically after we get data from a ajax request. The grid seems to reloading when the reload is triggered. However, it seems to get data from the old URL('/getdata') and not the new one with a different parameter set. I also tried the solution mentioned here, but it did not work in my case as I have dynamically added menu items.

Any help is greatly appreciated.

EDIT: I looked at the page request on firebug. I do not see a request going when I click on the menu item. I also added

 $("#list").jqGrid('GridUnload');

to the click handler function as mentioned in the answer to this question. It cleared out the grid for me, but did not reload. So I added the code for jqgrid there and then it worked and the jqgrid displays with the new data. So my code with the changes looks like this:

$("#menuitem").click(function(e){
    $("#list").jqGrid('GridUnload'); 
    $("#grid").jqGrid({
       url: '/getdata?id=1234&name=val.text'',
       datatype: "json",
       colNames: ['data'],
       colModel: [
            {name: 'data', align: 'center'}
       ],
       jsonReader: {
             root: "logs",
            cell: "",
           id: function () {
             return function () {
               return $.jgrid.randId();
             }
           },
       page: function() { return 1; },
       total: function() { return 1; },
       records: function(obj) { return obj.logs.length; }
    },
   loadonce: true,
   viewrecords: true,
   autowidth: true,
   ignoreCase: true,
   height: "auto",
   rowNum: 999,
   autoencode: true,
   beforeProcessing: function (data) {
       var items = data.data.data.split("\n"), i, l, item;
       data.logs = [];
       for (i = 0, l = items.length; i < l; i++) {
           item = $.trim(items[i]);
           if (item.length > 0) {
               data.logs.push([item]);
           }
   }
}
}).jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn"});

});

Is there a better way to do this. It looks too cumbersome and heavy for what its doing. Is there a way to get the reload grid to work? I guess this is what goes on internally, but seems too much code when you using the plugin.

thanks,

Asha

score 2 · Accepted Answer · answered Jan 11 '13 at 09:17

First of all you need to fix syntax error in your code (if the error exist not only in the text of the question):

url: '/getdata?id=1234&name=val.text'',

must be replaced to

url: '/getdata?id=1234&name=val.text',

The main problem which you have exist because you use loadonce: true which is very practical if you don't want or can't implements paging and filtering of the data on the server side and you want that jqGrid do this for you. You should understand that jqGrid change original datatype from "json" to "local" in case of usage of loadonce: true. Only because of the changes all next requests to refresh the content of the grid (paging, filtering, sorting ...) will be implemented locally without any requests to the server. If you need to reload the grid you will need to reset the value of datatype to "json" before reloading of the grid. Usage of GridUnload is not required in the case:

$("#grid").jqGrid('setGridParam', {
    url: '/getdata?id=1234&name=val.text',
    datatype: "json"
}).trigger("reloadGrid");

By the way you need set url parameter only if you need to change it. If you want just reload the content with the same URL as before you need to reset only datatype: "json".

Thanks @Oleg, worked like a charm. I now understand why it did not work earlier with your explanation. I will be implementing pagination in the next week or so for this jqgrid on the server side as well. So this explanation helps. The url does change for the requests. URL syntax issue is only in the text of the question, which I inserted when copying over. Thanks again. — Alice, Jan 11 '13 at 17:23

score 1 · Answer 2 · answered Jan 11 '13 at 05:07

1

Try this

change

loadonce: true,

to

loadonce: false,

I think loadonce is the issue

answered Jan 11 '13 at 05:07

Kris

1,882
1
20
23

Refreshing a jqgrid on a menu item click, getting data from a different URL

2 Answers2