Get updates and news:
Want to get Lullabot article, videocast, and podcast announcements delivered right to your in-box? Let us know your email address (we won't share it) and we'll let you know when anything exciting happens.

Drupal ahah.js in Core, more than just form elements

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

Nate, you're a total rock

Nate, you're a total rock star.
Thanks for getting those in !

Thanks for making FAPI even

Thanks for making FAPI even more powerful Nate!! :)

(And for making the jQuery Form module obsolete...)

RE: (thanks for making FAPI even)

Wim -

Or the popular Lullabot TID term "Deprecated!" ;-D

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.

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?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote>
  • Lines and paragraphs break automatically.
  • Use <!--pagebreak--> to create page breaks.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options