Ajax: first impressions
I’ve been working on a form in my app and was faced with a decision regarding one of the fields: I need the user to select an object from a (possibly large) number of existing objects. I reckoned I had 3 options: a simple drop-down list, which could prove to be impractical; a pop-up window; or, behind door number 3, I could investigate the use of Ajax, which would have the added effect of adding some web 2.0 style eye-candy to the project. Can you guess which option I went with?
Google, as always, provided an abundance of information, so I started reading this tutorial.
I downloaded the script.aculo.us library (which includes the Prototype framework) onto my development machine and extracted all the necessary .js files into /app/webroot/js/, excluding the unit test stuff. I included the scripts by adding the following to my document header in /app/views/layouts/default.thtml:
link(‘prototype.js’); echo $javascript->link(‘scriptaculous.js?load=effects’); ?>
I then made the application aware of this new functionality by added this line to the AppController definition in /app/app_controller:
var $helpers = array(‘Html’, ‘Ajax’, ‘Javascript’);
No errors so far! In the view I was working on I created a div, put some content into it and through CSS set display: none, learning the hard way to use an inline style to do this instead of using the external style sheet…
On the form I created a link similar to this:
And by Jove it worked! Clicking on the link made the formally hidden div fade into existence before my very eyes.
This is why I love what I do :)