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

http://drupalcode.org/viewvc/drupal/contributions/modules/ahah_helper/ahah_helper_demo.module?view=markup

You will note that the AHAH helper module does most of the work for you by abstracting away all the javascript/AJAX code and leaves the developer to work with just the Drupal form API (adds a few new elements to the form API) – now that’s sweet.  Just

  • Call the "ahah_helper_register" function at the start of your form and
  • Make sure to set #default_value of each dynamically inserted drop down select to that last known value
  • and that’s it!

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.

Comments

Your email will not be published. Required fields are marked *

There are no comments yet.

Other posts you will enjoy...

Deciding How to Design Your Interactive Infographic
Are You Using Content Curation as a Crutch?
Keeping Audiences in Mind When Developing Content Strategy
6 Steps To Building an Email Marketing Calendar