Refresh content automatically if the database chan

Question

how can I automatically add the value of a database row (PHP), to the page, without refreshing the page itself, when the mysql database table changes?

So, it is a bit like this: Automatically refresh browser in response to file system changes? , but instead of refreshing the browser with the file system changes, update the content, without refreshing anything, when the databse changes.

Thanks. I have tried to make this as clear as possible.

Answer 1

Please note this is outdated answer. Recent ways of doing that is: websockets, server-send events. Nice example of that is Firebase. You can find simple code example in: https://github.com/laithshadeed/wsk-feedback. In this example you will see that updating firebase will send event to the browser via websocket, then the UI will update.

This is called Comet/Reverse Ajax/HTTP server push http://en.wikipedia.org/wiki/Comet_(programming). They are many techniques for doing this as well as many existing frameworks to do it for you.

There are many answers in SO about Comet https://stackoverflow.com/search?q=comet

Simple implementation would be javascript setTimeout and setInterval to check server status, with trigger/stored procedure on mysql.

For depth dive into Comet. There are two cool books about this:

Comet and Reverse Ajax 2008 By Dave Crane

Chapter 4 (River of Content) - Building the Realtime User Experience 2010 By Ted Roden

Update: You may look to the newer techniques in HTML5 like Websockets and Server-sent Events, although IE does not support them well, at the moment Server-sent events is not supported in IE and Web Sockets only supported in IE10

Answer 2

It's not a truly simple task, but it's not that bad. You need a few things working in concert:

• A javascript routine on your page that checks with the server at specifiedintervals
• A page on your server that reports changes when polled
• A callback function on your page that inserts new elements (or updates/deletes existing elements) when changed data is reported by the server.

How you determine which data has been changed is something you will have to think about. The easiest way is probably to have a "modified" field maintained for each record. This way when your javascript polls the server it can include a "last time I checked" timestamp and the server only has to return changes that are more recent.

It's not quite so hard as it may at first appear. Take advantage of prebuilt libraries like jQuery and you can do things like:

$.ajax({
  url: 'http://example.com/checkforupdates.php?last=' + (new Date().getTime()),
  context: document.body,
  success: function(data){
    // do something here to add/update/remove elements on your page
    // using the information returned in the data argument.
  }
});

Answer 3

Manipulate the DOM with JavaScript.