Lullabot Ideas
We know stuff. We empower you to know stuff too.
Drupal ahah.js in Core, more than just form elements
Blog by Nate HaugOctober 8, 2007 - 1:22am
I was working on a patch for poll module today when I made a wonderful discovery.The AHAH (similar to AJAX) enhancements for Drupal core work with all DOM elements, not just form elements (like buttons and select lists). All the code necessary is already in Drupal core, though the following implementation with poll module is still in progress.
The thing I love about Drupal's new AHAH implementation is making javascript available to PHP developers. Here's the extent of code necessary to add this behavior to poll module:
<?php
$form['choice_wrapper']['poll_more'] = array(
'#type' => 'submit',
'#value' => t('Add another choice'),
'#description' => t("If the amount of boxes above isn't enough, click here to add more choices."),
'#weight' => 1,
'#submit' => array('poll_more_choices_submit'), // If no javascript action.
'#ahah' => array(
'path' => 'poll/js',
'wrapper' => 'poll-choices',
'method' => 'append',
'effect' => 'slide',
),
);
?>This is the normal FormAPI implementation of ahah.js. All necessary javascript is included on the page as necessary, not a line of javascript needed by the PHP developer.
If we wanted to do the same thing with a link (or DIV, TABLE, or whatever HTML tag you wanted), we could add the javascript to the page manually:
<?php
$ahah_binding = array(
'url' => url('poll/js'),
'event' => 'click',
'wrapper' => 'poll-choices',
'selector' => '#edit-poll-more',
'effect' => 'slide',
'method' => 'append',
'progress' => array('type' => 'throbber');
);
drupal_add_js('misc/jquery.form.js');
drupal_add_js('misc/ahah.js');
drupal_add_js(array('ahah' => array($element['#id'] => $ahah_binding)), 'setting');
return '<a href="#" id="edit-poll-more">Click here for more choices</a>';
?>This is a totally untested example, but it shows the necessary code to add AHAH to any element on the page, not just form items. It's pretty cool, and I hope that AHAH will aid in the battle for better usability in Drupal.
Comments
Version
It's for Drupal 6, right?
In case it helps someone else...
Great tip, Nate. Thanks.
I spent much longer than I should have trying to work out why, when I used a variation on your final script to add AHAH behaviors to a link, the first click ran the AHAH routine as expected but the second click ran it twice, the third click ran it 4 times, and so on. Turns out the 'ahah-processed' class wasn't being added to the link meaning the behaviors were getting re-attached every time the link was clicked.
The root of the problem? I'd changed the 'url', 'wrapper' and 'selector' values to suit my element ids, but I'd missed the $element['#id'] key in the final drupal_add_js call. I know this will be obvious to most, but in case it helps someone else, this function call should be adapted as follows:
<?phpdrupal_add_js(array('ahah' => array('my-ahah-selector-id' => $ahah_binding)), 'setting');
?>
Sweet
Nice one Nate, I'll check this out.
Thanks for this interesting article.
I couldn't get the code for attaching ahah to an HTML tag working though. Can you point me to any working examples?
Same here, doesn't work
The above sample code doesn't work for me either.
Any working example anywhere, or a link to a patch to the poll module?
Thanks!
can't view video
I can't view this video. I'm using Ubuntu 7.04 and Firefox 2.0.0.6. Please provide an alternative link, so I can download the file in order to view it with mplayer.
RE: (thanks for making FAPI even)
Wim -
Or the popular Lullabot TID term "Deprecated!" ;-D
Thanks for making FAPI even
Thanks for making FAPI even more powerful Nate!! :)
(And for making the jQuery Form module obsolete...)
Nate, you're a total rock
Nate, you're a total rock star.
Thanks for getting those in !