auto-refreshing div with jquery

Question

how exactly do you make an auto-refreshing div with javascript (specifically, jQuery) ? I knew about the setTimeout method, but is it really a good practice ? Is there a better method ?

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
  });
  window.setTimeout("update();", 10000);
}

Thanks before.

Answer 1

There's a jQuery Timer plugin you may want to try

Answer 2

Another modification:

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

The difference with this is that it waits 10 seconds AFTER the ajax call is one. So really the time between refreshes is 10 seconds + length of ajax call. The benefit of this is if your server takes longer than 10 seconds to respond, you don't get two (and eventually, many) simultaneous AJAX calls happening.

Also, if the server fails to respond, it won't keep trying.

I've used a similar method in the past using .ajax to handle even more complex behaviour:

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
      $("#some_div").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
}

This shows a loading message while loading (put an animated gif in there for typical "web 2.0" style). If the server times out (in this case takes longer than 2s) or any other kind of error happens, it shows an error, and it waits for 60 seconds before contacting the server again.

This can be especially beneficial when doing fast updates with a larger number of users, where you don't want everyone to suddenly cripple a lagging server with requests that are all just timing out anyways.

Answer 3

I like the second one, got a bit of a problem with it though...just like this guy: link text

The page does the refresh but after the content gets loaded in the some_div then it disappears straight away. Looking in my sourcecode at that point I can still see the code that should be displayed but it isn't visable on the page. The loading things gets done correctly btw and I can see that div popping up and going away again...Anybody knows what could go wrong so the contents dissapears right away?