Make field data change in real time without refresh.. How on a Website?

Question

I have two numeric fields that contain the following information:

(1) Users Registered (2) Money Raised

Is it possible to make the data change in real time (EVERY SECOND) while someone is viewing the page with the fields? I don't want the viewer to refresh manually to see the updated number, but have the fields change automically while the page is viewed. I want it to be similar to like a text clock that actually shows the seconds counting, etc.

The fields are connected to a database that is constantly changing every second.

Does anyone know if this is possible? Any examples? or Suggestions?

I really appreciate it.

Erik

Answer 1

You have 2 options:

You can use the setTimeout feature to make an ajax request every second and update the web page.

If you can limit your self to the most current web browsers, you could use WebSocket to maintain an persistant connection to the server, allowing the server to send out updates whenever necessary.

EDIT

There is also Comet, but that might be overkill.

Answer 2

I guess this is a web application. In this case you would make a request to your server with XMLHttpRequest every second. The field can then be updated with the response. You might also use websockets which open a permanent connection to the server. Unfortunately they are only supported by newer browsers.

An example for my first proposal with jQuery:

// This function starts the request and calls success on response.
var refresh = function() {
  $.ajax({
    url: "/some/path",
    cache: false,
    success: success
  });
}

// Replaces the contents of the field with your response and
// triggers refresh() after 1000ms.
var success = function(data) {
  $(".field").html(data);
  setTimeout(refresh, 1000);
}

// Starts processing when document is ready.
$(function() {
  refresh();
}