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).

Advertisements

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: