June 9th, 2010
Web Design & Development
This week I thought I’d share a little drupal web development nugget I’m sure many other developers will find useful.
The problem: we were recently tasked with creating dynamic, multi level drop down select form elements. What I mean is, the user is to be presented with a single drop down select with several options to choose from, they choose one, then another drop down select appears below or to the side of that one, they make a selection… and the process repeats N number of times as needed.
Normally you might like to use a bit of ajax to listen to the first drop down select box, then based on the selection, call in the URL that spits back the new drop down select and write it into the web page, ugh – and you do all kinds of bug testing and hair pulling when you can’t figure out WHY it’s not working, yea do don’t want to do that.
The solution: Enter a technology called "AHAH". I had sort of heard about this one in the past but figured it was worth explaining a little more now that I’ve worked on it. AHAH (yes it sounds like "ah-ha!") stands for Asynchronous HTML and HTTP and is really just a subset of AJAX. In laymens terms, AHAH can be used to dynamically update web pages, say to insert an image into a specific div tag upon clicking a specific link or refreshing an entire web page with new content without actually hitting the refresh button or – oh yea – inserting a second drop down select based on what was selected in the first drop down select – genius!
So Drupal actually makes it really really easy to create these types of AHAH driven drop down select forms. AHAH is already built into drupal 6’s core but you need to download and install this AHAH helper module because without it making these kinds of forms is still a hassle.
The magic can be seen with this sample module linked directly from the module page
By the way you can still use AHAH with Drupal’s form API to create other fantastic UI results, other than dynamic, multi-dropdown selects. Try taking a look at this tutorial on how to create your own custom callbacks to bring more flexibility to your forms.
See you all next time.
There are no comments yet.