Ajax refresh div is showing old data after refreshing

Question

Hi there I am looking for some hints to troubleshoot a problem I am having with ajax refresh , The problem is the div shows latest info on load but when it refreshes it is showing older data . The div shows the latest tracks played on air like I say when the page loads it shows the correct tracks but after 10 seconds when it reloads It is showing older tracks .

Here is my code ...

$(document).ready(function() {
    $("#tracks").load("json.php");
    var refreshId = setInterval(function() {
        $("#tracks").fadeOut('slow').load("json.php").fadeIn('slow');
    }, 10000);
    $.ajaxSetup({ cache: false });
});

Any help figuring this problem out would be greatly appreciated

Are you sure that data returned from `json.php` is different for every 10 seconds ? — Arkantos, Mar 10 '16 at 13:06
It may not be different every 10 seconds but when it loads it shows most recent and after 10 seconds it shows older data and continues to show older data — TheWebMann, Mar 10 '16 at 13:08

Presari · Answer 1 · 2016-03-10T13:14:19.720

3

I've found disabling ajax caching doesn't work reliably in all browsers. To be sure to get fresh content, you could add some unique data to the query string, for example:

function rand() { 
    return Math.floor((Math.random()*99999)+10000);     
}

...

$("#tracks").load("json.php?defeatCache="+rand());

edited Mar 10 '16 at 13:14

answered Mar 10 '16 at 13:07

Presari

114
4

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

This is probably caused by caching of the browser. You should explicitly turn off caching to avoid this.

In ASP you could/should set:

Response.CacheControl = "no-cache, no-store, must-revalidate"
Response.Expires = -1

See this topic for an excellent discussion about this.

edited May 23 '17 at 11:50

Community

1
1

answered Mar 10 '16 at 13:08

Dandorid

205
2
12

Ajax refresh div is showing old data after refreshing

2 Answers2