Internet Explorer ignoring cache ? (AJAX call & Datatables)

Question

I've been searching for a solution for a couple of weeks now to no avail.

My web application uses Spring/Hibernate. When I make an AJAX call to retrieve data for my table(using Datatables), everything show up fine. However, when I click on a link and then click BACK to return to the table, IE and Firefox seem to behave differently :

FIREFOX :

Display table page (AJAX call);
Click link to go to new page;
Click Back to return to table page;
Database DAO NOT called to re-display data

INTERNET EXPLORER :

Display table page (AJAX call);
Click link to go to new page;
Click Back to return to table page;
Database DAO IS called to re-display data

Why is this happening and how can I fix this ? Basically I'd like IE to behave like Firefox in this particular scenario.

Sample code (JSP):

$('#tableWithData').DataTable( {
    serverSide : false,
    ajax: {  
         "url": "/app/search/rowData",
        "data": function ( d ) {
            d.searchDeptlCntnrNo   = $('#criteriaDeptlCntnrNo').val();  
            d.searchCntlNoCd       = $('#criteriaCntlNoCd').val();  
            d.searchExactMatch     = $('#criteriaExactMatch').val();                
            d.searchCntlNoCmpnt1   = $('#criteriaCntlNoCmpnt1').val();              
            d.searchCntlNoCmpnt2   = $('#criteriaCntlNoCmpnt2').val();
            d.searchCntlNoCmpnt3   = $('#criteriaCntlNoCmpnt3').val();
            d.searchCntlNoCmpnt4   = $('#criteriaCntlNoCmpnt4').val();
            d.searchRangeField     = $('#criteriaRangeField').val();                
            d.searchCntlNoCmpntQty = $('#criteriaCntlNoCmpntQty').val();
            d.searchCntlNoCmpntRng = $('#criteriaCntlNoCmpntRng').val();

    }},           
    stateSave: true,    
    pagingType: "full_numbers",        
    deferRender: true,        
    scrollY:        400,
    scrollCollapse: true,
    scroller:       true,
    lengthChange:   false,
    "columns": columns,             
    language: {
        "loadingRecords": loading data..."},
    fnInitComplete: function(oSettings, json) {
        $("#loading-div-background").hide();
      },
    language :{
            "emptyTable": "Your query returned 0 results."          
      }

} );

EDIT :

This would be a BFCache issue and since I use JQuery and it has an embedded onload event, Internet Explorer cannot retrieve the cache ? https://stackoverflow.com/a/1195934/1501426

It is very strange why do you use url while you don't want this url being called? — Roman C, Feb 01 '16 at 18:54
"url" contains the function to fetch the data. In FIREFOX, if I navigate away and then come back, the "url" isn't being called. In IE, the url is called each time. — Frederic Pierre, Feb 01 '16 at 19:41
I found a question similar to mine but with no definite answer : http://stackoverflow.com/questions/7825579/make-the-bfcache-in-internet-explorer-work-like-firefox — Frederic Pierre, Feb 01 '16 at 20:45

score 0 · Answer 1 · edited May 23 '17 at 11:59

For anyone having the same problem, here is what I've found :

This is an IE issue with jQuery and Internet Explorer :

jQuery automatically attaches an unload event to the window, so unfortunately using jQuery will disqualify your page from being stored in > the bfcache for DOM preservation and quick back/forward.

https://stackoverflow.com/a/1195934/1501426

It looks like I'm stuck with this. For now, I will open a new window when the user clicks a link but IMO, that's a bad design.

Internet Explorer ignoring cache ? (AJAX call & Datatables)

1 Answers1