Cached data showing on browser on jquery ajax call

Question

I have following ajax call with me which is written in jquery: which takes continuous response from controller in json format and displays it on screen by setting values (Not there in following code).

$(function() {
 $(".master_status").hide();
   setInterval(
    function() {
         $.ajax({
         type : "Get",
         url : "getDeviceInfo.htm",
         success : function(response) {
           if(response != null){

           }
         } ,
    error : function(e) {
        }
    });
    }, 500);

    }

And I am getting data from controller in every half second. But sometimes it shows previous state data for a fraction of second. I traied cache:false, in ajax call and increasing and decreasing interval time but still problem exists. Any suggestions?

Aman Arora · Answer 1 · 2013-11-21T15:08:51.387

1

Reason for the old data getting rendered:

Browsers struggle hard to make your web experience easier and faster. For that they even cache the response of requests, so that if again you call the ame page. They show it a local copy rather than going to server again. But it becomes a problem sometimes.

Solution: Try appending a unique request parameter at the end of url. So if you are going to url (http://something.com/data), try changing it to

  http://something.com/data?someUniqueThing

Unique thing: Generate a random number before sending the request and append it to url. So your ajax call will become :

 $(function() {
      $(".master_status").hide();
           setInterval(
              function() {
     $.ajax({
     type : "Get",
     url : "getDeviceInfo.htm?someUniqueThing",
     success : function(response) {
       if(response != null){

       }
     } ,
error : function(e) {
    }
});
}, 500);

}

It will not let the browser cache your requests. Why ? Because every second request will have a uniqueId at the end. Browser treats it as a new request but at server side,it will cause no side-effects.

edited Nov 21 '13 at 15:08

answered Nov 21 '13 at 14:20

Aman Arora

1,202
1
10
25

Aman arora: I tried by your approach, but still problem exists. – Swapnil Walivkar Nov 22 '13 at 06:17
$(function() { $(".master_status").hide(); setInterval( function() { $.ajax({ type : "Get", url : "getDeviceInfo.htm?"+Math.random(), success : function(response) { if(response != null){ } } , error : function(e) { } }); }, 500); } – Swapnil Walivkar Nov 22 '13 at 10:12
@SwapnilWalivkar It works fine. I created a prototype for the same and its working.Can you tell me what is there in **getDeviceInfo.htm**? I mean, what changes are happening at getDeviceInfo.htm? – Aman Arora Nov 25 '13 at 07:26
Aman: I solved it, problem was not with cache data. It was in controller side. Thanx all for ur kind replies – Swapnil Walivkar Nov 27 '13 at 04:59

score 0 · Answer 2 · answered Nov 21 '13 at 14:25

0

This is well know issue in IE. Since your are using jquery, you could just use the cache attribute in you $.ajax call. Refer to the jquery API for more information.

answered Nov 21 '13 at 14:25

benjamin.d

2,599
3
15
33

I am doing this for Firefox, not for IE – Swapnil Walivkar Nov 22 '13 at 06:08
Did you try the cache attribute anyway? – benjamin.d Nov 22 '13 at 10:38

Cached data showing on browser on jquery ajax call

2 Answers2