AHAH forms in Drupal

02 Jul

AHAH forms in Drupal

in AHAH forms, development, Drupal, Drupal, Drupal Planet, Drupal Planet, forms

AHAH is a way to allow developers to add new form elements to an existing form (on a page) asynchronously, without reloading the page again. Please refer the detailed fapi on AHAH.

The main steps for creating an AHAH form are:

1. Attach the AHAH property to a form element. (Not all form elements support AHAH)

2. Declare a callback function which should be called 

3. Implement the callback function

Despite what you might feel, or might have read, once you try a simple AHAH form, you will get used to it fairly quickly.

You will the other functions like hook_menu and menu callback just like normal callbacks. Let's assume that the menu callback function invokes the get_AHAH() function by calling drupal_get_form('get_AHAH');

In this example, a select form element will load additional values on the page if something is selected from the drop down.

 

1. Define and attach AHAH to a form element. 

function get_AHAH(){

$form['class_registration']['select_category'] = array(

'#title' => t('I want to ...'),
'#type' => 'select',  
  '#options' =>  array(
'1' => 'Travel to Mars',
'2' => 'Write the best code',
'3' => 'Take a good vacation'
),
'#ahah' => array(
      'path' => 'mywishes',   // The URL path that the hook_menu will trigger the callback on.
      'wrapper' => 'render-mywishes',   // The div id where the returned HTML will be applied.
      'method' => 'replace',
      'effect' => 'fade',
    ),
);
return $form;
}

2. Declare the callback:

When an item is selected from the select control defined in step 1, the menu with URL 'mywishes' will be triggered. The control goes to the hook_menu. In the hook_menu, you need to define the code as follows:

$items['mywishes'] = array(
'title' => 'Show AHAH response to my wishes',
'page callback' => 'react_to_my_wishes',
'access arguments' => 'access content',
    'access callback' => 'user_access',
    'type' => MENU_CALLBACK, 
);

the function 'react_to_my_wishes' will be called for the URL mywishes. And this method will serve as the callback method. The function will look something as follows:

3. Implement the callback function: 

The callback function will be invoked by the hook_menu when the menu request is made. 

function react_to_my_wishes(){

// Make a DB query and fetch some nodes into the $nodes

	foreach($nodes as $node){
    $value_to_display = $node['node']->title;
    $form['myform'][$node['nid']] = array(
     '#type' => 'markup',
     '#value' => '<li><a class="reaction" href=' . $base_url . 'mywishes/' . $node['nid'] . '>' . $value_to_display .  '</a>',
    );
 }
  $output = theme('status_messages') . drupal_render($form);
  drupal_json(array('status' => TRUE, 'data' => $output));
}

This function will fetch some nodes based on the selection in the previous step. We are creating URL links to the fetched nodes. You can create any other control from the fetched values or react in any other way.

Well that is all there is to the AHAH forms.

So you create a AHAH control, define the callback for it and the then implement the callback function. Quite an ahah!! 

I also found this note to be quite useful. 

 

 

copyright 2012 10jumps Llc.

copyright 2012 10jumps LLC.