Sunday, August 20, 2006

Unobtrusive Ajax with Fallback

I found myself trying to remember on which project and which feature I implemented unobtrusive ajax with fallback. So I'm writing it here in case I forget again.


One of our recent clients requested implementing ajax and some nice effects on their blog comments.


I thought it was an excellent exercise to see if it was possible to keep the old way the system added comments, which is to submit a form, and to use ajax whenever the browser supports it.


I was able to accomplish this by using the events library in YUI (Yahoo User Interface).


I used the addlistener function to add the javascript that performs the ajax call that adds the comment.


I pretty much left the original form intact, meaning there is still a method and action attribute. I prevented the default behavior from firing by using Event.preventDefault().


The beauty of YUI is that if javascript is turned off, the form will do a normal submit to add the comment instead of calling the ajax function.