jquery help with updating div content onchange

Question

I have a div the contents of which constantly changes based on a server side process. Currently I use jqeury load to poll the server every 3 seconds to get any updates.

This is what I have:

function poll() {
    reloadPage();
    setTimeout("poll();", 3000); 
}

function reloadPage() { 
      $("#mydiv").load(location.href + " #mydiv>*", "");
}

This works well in firefox but in IE, the load doesn't update the div, probably due to a caching issue. Is there a better way to do what I'm trying to do other than polling periodically?

Answer 1

You need to change the URL for each request to prevent IE from caching the response.

For example:

function poll() {
    reloadPage();
    setTimeout(poll, 3000); 
}

function reloadPage() { 
    $("#mydiv").load(location.href + "?Timestamp=" + new Date() + " #mydiv>*", "");
}

Also, you shouldn't pass a string to setTimeout.

Answer 2

jQuery's ajax has a bunch of default settings, one of which controls caching. If you set that to false it will append a timestamp to the ajax call to prevent caching.

http://api.jquery.com/jQuery.ajax/

Answer 3

Is there a better way to do what I'm trying to do other than polling periodically?

Since HTTP is a stateless protocol, no. You have to poll to see what's going on on the server.

But there is a better way to implement the polling:

setInterval(function () {
  $("#mydiv").load(location.href + " #mydiv>*", {Timestamp: new Date()});
}, 3000);

Notes:

• define an Interval instead of the Timeout,
• pass an actual function to setInterval, not a string
• use the data parameter of load() to pass in a cache breaker