Last summer I began working on extending Avi Bryant’s liveUpdater.js and integrating it into Borges . I was successful as far as that went and reported my results here and here . Unfortunately Borges turned out to be a dead end because of some fundamental problems with its implementation.

However my fork of liveUpdater.js has went on to lead a productive part in the Lakeshore project (more about it later). liveUpdater has been a core piece of the user interface for many commercial applications written by myself, the gentle folk at Mission Data , and several other people that are using Lakeshore. So in short, liveUpdater is under active development and is being used successfully in several commercial applications.

Enough with the history lesson… take a look at the demo . What’s happening is that some event on the client side (a keypress, a click, etc) triggers a request to the server via XMLHttpRequest. The server returns one or more snippets of HTML. The snippets replace existing sections of the current document based on their “id”. Very nice things are now possible with only a tiny amount (or in the case of Lakeshore, no) javascript coding. You get the dynamic feel and most of the responsiveness that is promised by Ajax without splitting your logic between the client and the server.

Here is how the “Update time” link on the demo works. The HTML contains an empty div with an id of “time”. The “Update time” link is set to use liveUpdater with a target URL of time.cgi :

document.getElementById(‘time-link’).onclick = liveUpdaterUri(‘time-link’,‘time.cgi’)

time.cgi sets the content type of its response to “text/xml”. It returns a body element containing a div with the current time. Note that the id of the div matches the id of the empty div in the original HTML document. If you wished to replace additional elements on the page just include them in the body element.