Archive for June, 2006|Monthly archive page

Ajax without the X

Well this is my first Ajax post. I have been using it in my first commercial website, a shopping cart, which is not online yet, but when it is I’ll post a link here.

Ajax without the X, or simply Ajah, means you don’t return XML from an Ajax call. Instead you return HTML which is then put into the document using the (non-standard) .innerHTML property.

And here is my list of best practices:

  • Use moo. It’s awesome, light, fast, flexible and about a 10th the size of prototype
  • Today I found out a nice little trick that can help you do error handling. The problem is this: most ajax libraries just return an error when the connection failed. But what if there was some wrong input or other semantic error? I found out it’s real easy to just inject a <input type=”hidden” value=”error” id=”message” /> in the code. Then in the CSS you define message to be styled as an error. Or, as I did, you copy the value into a new paragraph in the page, which you can position anywhere. I needed only 36 lines of script (not including moo)!
  • The HTML returned can be given class names in the back end. I use the following procedure:
    • Initially the shopping cart is empty, the cart info has visibility:hidden ( no class name )
    • The shopping cart is busy, the class name becomes active updating. The updating consist of a nice animated gif showing the update is being done
    • The cart is done. The class name becomes active again.
    • If there was an error, the message paragraph shows “error”. If there was a succesful update, the message shows “product added”.

See the ajax shopping cart online. And if you visit aruba then make sure to shop at Ling and Sons (not because I make money of this but because I made the script LOL).