jqgrid not updating data on reload

Question

I have a jqgrid with data loading from an xml stream (handled by django 1.1.1):

jQuery(document).ready(function(){
  jQuery("#list").jqGrid({
    url:'/downtime/list_xml/',
    datatype: 'xml',
    mtype: 'GET',
    postData:{site:1,date_start:document.getElementById('datepicker_start').value,date_end:document.getElementById('datepicker_end').value},
    colNames:[...],
    colModel :[...],
    pager: '#pager',
    rowNum: 25,
    rowList:[10,25,50],
    viewrecords: true,
    height: 500,
    caption: 'Click on column headers to reorder'
  });

    $("#grid_reload").click(function(){
        $("#list").trigger("reloadGrid");
        }); 
    $("#tabs").tabs();

    $("#datepicker_start").datepicker({dateFormat: 'yy-mm-dd'});
    $("#datepicker_end").datepicker({dateFormat: 'yy-mm-dd'});
...

And the html elements:

<th>Start Date:</th>
<td><input id="datepicker_start" type="text" value="2009-12-01"></input></td>
<th>End Date:</th>
<td><input id="datepicker_end" type="text" value="2009-12-03"></input></td>
<td><input id="grid_reload"  type="submit" value="load" /></td>

When I click the grid_reload button, the grid reloads, but when it has done so it shows exactly the same data as before, even though the xml is tested to return different data for different timestamps.

I have checked using alert(document.getElementById('datepicker_start').value) that the values in the date inputs are passed correctly when the reload event is triggered.

Any ideas why the data doesn't update? A caching or browser issue perhaps?

Answer 1

It looks like a browser caching issue. By default, IE will cache the results of a GET request. So even if you make the same request multiple times from the same browser instance, if it is for the same URL it will always use the cached version (IE, data from the first request).

Internally, jqGrid uses jQuery.ajax to retrieve data. You can instruct jqGrid to pass additional options to the ajax request via the option ajaxGridOptions. So just tell it to not cache results and you should be good to go:

jQuery("#list").jqGrid({
    ...
    ajaxGridOptions: {cache: false}
});

Alternatively:

If the first approach does not work with django due to the construction of the GET URL (since jQuery will use the ? construction), another possible option is to completely reload the grid. To do so:

• Call GridUnload to unload the grid,
• Then call .jqGrid again to reinitialize the entire grid
• You would also need to append a timestamp to the url option to guarantee the URL is unique, otherwise it will just be cached again.

Obviously this is not as nice of a solution, but it would work.

Answer 2

It seems to me you should replace

postData:{
    site:1,
    date_start:document.getElementById('datepicker_start').value,
    date_end:document.getElementById('datepicker_end').value
},

with

postData:{
    site:1,
    date_start: function() { return document.getElementById('datepicker_start').value; },
    date_end: function() { return document.getElementById('datepicker_end').value;}
},

UPDATED: In your current solution the value of postData are calculated one time as you create jqGrid. In the postData with functions jqGrid forward postData to jQuery.ajax and during every jQuery.ajax (after $("#list").trigger("reloadGrid");) the values from datepicker will be read at the moment of jQuery.ajax call.