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.