What is the proper way to update all elements of a rendered page via AJAX?

Question

I have a complicated page being rendered by PHP and would like to keep all elements of the page up to date via AJAX long polling. Is there some kind of general / clever way to design an infrastructure to support this without having to specify manually each element to update? Just looking for ideas. Thanks!

Answer 1

Using jQuery, I would send a comma-separated list of jQuery selectors to update to the server. The server will ultimately respond by reading those selectors and producing the HTML to fill up the elements matching the selectors:

$.get("/updater", { elementsToUpdate: "#someDiv,#someTable,#someOtherElement"}, function(json) {
      $.each(json, function(k, v) {

        // the key is the selector, the value is the 
        // HTML to set to that (or those) element(s):
        $(k).html(v);
      });    
}, "json"); // we are expecting the server to return JSON

The server will respond by sending JSON to the client with the following structure:

 {"#someDiv":"this is some HTML to fill up div with ID someDiv","#someOtherElement":"here is some more HTML","#someTable":"here is some more HTML"}