How AHAH Works in Drupal 6

How it works

The AHAH framework is fully integrated into Drupal 6 so all you need to do is hook into it using Drupals form API. Here's an example of how to make the form API to use AHAH.

<?php
  $form
['my_form_submit'] = array(
   
'#type' => 'submit',
   
'#value' => t('Submit'),
   
'#weight' => 1,
   
'#submit' => array('my_form_submit'),//none JS version
   
'#ahah' => array(
     
'event' => 'click',
     
'path' => 'mymodule/js',
     
'wrapper' => 'myform-wrapper',
     
'method' => 'replace',
     
'effect' => 'fade',
     
'progress' => array(
       
'type' => 'bar',
       
'message' => t('Loading...')
      )     
    ),
?>

We're focusing on the #ahah array at the end of the form array

  • #ahah['wrapper']

    This is the ID of the HTML element on the current page that should be updated with the returned HTML from our #ahah['path'] defined menu path.

    In our example 'wrapper' => 'mymodule-wrapper' corresponds to <div id="mymodule-wrapper">.....</div> and this div would display the "Hello Drupal World" text returned by our mymodule_js() menu function when AHAH has been triggered.

  • #ahah['method']

    This is how you want the HTML returned from our #ahah['path'] menu function to be attached to our #ahah['wrapper'] defined wrapper.
    By default it with replace the HTML currently in the wrapper with the new HTML, but you can also have the follow:

    'after' = Insert returned HTML after the wrapper element
    'append' = Append returned HTML to the inside of our wrapper element.
    'before' = Insert returned HTML before our wrapper element.
    'prepend' = Prepend returned HTML to the inside of our wrapper element.

  • #ahah['effect']

    This is the jQuery effect you want to apply to the wrapper element when it receives the new HTML from our menu function.

    Possible values: 'none' (default), 'fade', 'slide'.

  • #ahah['progress']['type'] = Type of animation to display, bar or throbber
    #ahah['progress']['message'] = An optional message that should be displayed with the progress bar or throbber. You should wrap the text in the t().
    #ahah['progress']['url'] = An optional URL to a menu item that determines how full the progress bar is.