This post originated from an RSS feed registered with Agile Buzz
by James Robertson.
Original Post: Cosying up to the client-side
Feed Title: Avi Bryant
Feed URL: http://smallthought.com/avi/?feed=rss2
Feed Description: HREF Considered Harmful
I'm far from a Javascript wizard, and typically applications I build use as little of it as possible. But there's been a lot of buzz recently about the new breed of "rich" web UIs: the snappy navigation in GMail, Yahoo's subsequent purchase of Oddpost, IBM buying Alphablox (these guys built a spreadsheet in DHTML?), and so on. On a smaller scale, nice touches like autocompleting search fields are starting to pop up in blogs and online documentation everywhere. All of these rely in part on a particular Javascript trick: reacting to user input by making a background request to the webserver and selectively updating the current page from the data in the response, rather than doing a full redraw of the browser window. Traditionally, this has required nasty games with iframes, but recently browser support has gotten much better: the three browsers I care most about (Safari, Mozilla, and IE, in that order), all now support XMLHttpRequest, which makes doing an asynchronous HTTP GET from within a Javascript event handler pretty trivial.
So, much as I generally shun client-side scripts, I've been admittedly intrigued by how I might be able to leverage these techniques from within Seaside. What's the right generalization of all the various live update hacks out there? If I'm going to be doing Javascript, I want to do it once, do it right, and then build the right abstractions in Seaside to let me forget about it.
What I came up with does indeed work nicely for Seaside, but it might also be more universally useful. For the first and likely the last time, I'm posting some sample Javascript code for people to use. Do what you like with it; if you improve it in any way, feel free to email me your new version. It provides the function liveUpdater(), which takes as its only parameter a URI-generating function uriFunc. liveUpdater() returns a new function, suitable for attaching, for example, to the onclick handler of a link. This handler function does this:
Generate a new URI with the provided uriFunc
Make an HTTP GET request to that URI
Extract from the response the first element that has an id attribute
Replace the contents of the element with the corresponding id in the current document, with the contents of the element extracted from the new response
What this means, effectively, is that invoking this handler makes a request in the background, which the webserver can respond to by returning a new version of any part of the current page that it likes. That part of the page gets swapped out seamlessly for the new version. The thing I like about this is that it gives all the power to the server side: only after having processed the request does the decision have to be made about what parts of the page are affected and need to be redrawn, and those parts can be sent back to the client.
To round things off (and borrowing inspiration and approach from Jeff Minard), I also provide a higher level function called liveSearch(), which hooks a handler to a text input to trigger continuous liveUpdates as the user enters text. Both liveUpdater() and liveSearch() are supported with a nice clean API in the bleeding edge version of Seaside, available here. See the WALiveRequestTest class for example usage.
Previous Topic
