Alternatives to using meta-refesh for updating a page

Question

In the past, when I've covered events, I've used a meta-refresh with a 5 minute timer to refresh the page so people have the latest updates.

Realizing that this may not be the perfect way to do it (doesn't always work in IE, interrupts a person's flow, restarts things for people with screen readers, etc.) I'm wondering if there's any other way to do handle this situation.

Is it possible to have something like ajax check every few minutes if the html file on the server is newer and have it print a message saying "Update info available, click here to refresh"?

If that's crazy, how about a javascript that just counts down from 5 minutes and just suggests a refresh.

If anyone could point me to tutorials or code snippets I'd appreciate. I just play a programmer on TV. :-)

Answer 1

setInterval(function() {
  if (confirm("Its Been 5 Minutes. Would you like to refresh")) {
    window.location.reload(true);
    //Or instead of refreshing the page you could make an ajax call and determing if a newer page exists.  IF one does then reload.

  }
}, 300000);

Answer 2

Actually, your thought on a timed Ajax test is an excellent idea. I'm not sure that is exactly what StackOverflow uses, but it checks periodically to see if other answers have been posted and shows the user, on an interval, if there are updates.

I think this is ideal for these reasons:

• It's unobtrusive - the reader can easily ignore the update if they don't care
• It won't waste bandwith - no reloading unless the user chooses to
• It's informative - the user knows there's an update and can choose to act on it.

My take on how - have the ajax script send off the latest post id to a script that checks for new scripts. This script can query your database to see if there are any new posts, and how many there are. It can return this number. If there are new posts, show some (non modal) message including the number of updates, and let the user decide what to do about it.

Answer 3

You can use the setInterval function in javascript.

here's a sample

setInterval("refresh function", milliseconds, lang);

You will use it passing a name to a function that actually refresh the page for the first param and the number of milliseconds between refresh for the second param (300000 for 5 minutes). The third parameter lang is optional

Answer 4

If the user would be interacting with the scores and clicking on things it would be a little rude to just refresh the page on them. I think doing something like a notification that the page has been updated would be ideal.

I would use jQuery and do an ajax call to the file on the server or something that will return the updated data. If it's newer than throw up a Growl message

Gritter - jQuery Growl System Demo of what a Growl is using Gritter

A Growl message would come up possibly with whatever was changed, new scores and then an option within that message to refresh and view the new results.

jQuery Ajax information