Ajax in drupal

Ajax is more simpler than we think.In the support of jquery and other Javascript library todays web development is more powerful.

Drupal comes handy when it comes to Ajax.

Few things to know before we proceed to Ajax in drupal.

  • Drupal Form API
  • Module creation
  • Menu hook API
  • Ajax using Jquery and core php

Following are the steps that needs to be followed to create an ajax request in drupal.

step-1

Create a module with named as waytcodeAjax.module and enable it

step2

Inside waytcodeAjax.module we need to write our Menu hook and Form api to archive the ajax .

step-3

write all your code inside waytcodeAjax.module

Create A menu item to call a function

1
2
3
4
5
6
7
8
9
10
11
function waytcodeAjax_menu()
{
 $items['ajaxDemo'] = array(
'title' => 'My Ajax Demo',
'page callback' => 'myajax_demo_page',
'access callback' => TRUE,
'weight' => 1,
);
 
return $items;
}

//Create a function that will create a form using drupal_get_form function

1
2
3
4
function myajax_demo_page()
{
    return drupal_get_form('ajax_waytocode_simplest');
}

//Now write the actual form Api function , in my case the function name is ajax_waytocode_simplest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function ajax_waytocode_simplest($form, &$form_state)
{
 
//Below variable will catch the value of dropdown selected by you
$selectedVal = (isset($form_state['values']['changethis']))
                    ?$form_state['values']['changethis']:'';
 
$form = array();
//Below is a drop down type field, onChange of this field it will
//call a function called ajax_waytocode_callback
//Then the new content will be visiable inside a div called
//replace_texxtfield_div
$form['changethis'] = array(
                        '#type' => 'select',
                        '#options' => array(
                                         'one' => 'one',
                                         'two' => 'two',
                                         'three' => 'three',
                                           ),
                        '#ajax' => array(
                              'callback' => 'ajax_waytocode_callback',
                              'wrapper' => 'replace_textfield_div',
                                        ),
                          );
 
//$selectedVal is the default value of the textbox,that means when user will
//Select any value from dropdown it will be visiable in textbox
//This textbox will be replaced because we are keeping this textbox inside a
//Div called replace_textfield_div using #prefix and #suffix array properti
 $form['replace_textfield'] = array(
                        '#type' => 'textfield',
                        '#title' => t("Value of Dropdown"),
                        '#defaultvalue' => $selectedVal,
                        '#prefix' => '<div id="replace_textfield_div">',
                        '#suffix' => '</div>',
                                  );
  return $form;
}
 
function ajax_waytocode_callback($form, $form_state)
{
    //We should always return form element,which we are expecting to be
    //replaced,In our case textbox will display selected value from
    //dropdown element in ajax
    return $form['replace_textfield'];
}

 

#ajax is the property which has some drupal perdefined setting.In ajax the two main

property are callback and wrapper.

callback will call a function defined by the developer while changing the value of the

element. Syntax is like follow callback => ‘function_name_to_call’.

wrapper contains the name of the div id which contains the 2nd element of form.

2nd element means, that element which depends the value of first element ,whose

value will be replace by changing the first  form element i.e in our case Our first element

is Dropdown and second element is Textbox.

 

Things to be consider that most developers made mistakes while working with drupal ajax

Always write the $form and &$form_state as the parameters of drupal form,without this our form

will not get any value during ajax callback.

ajax_waytocode_simplest($form, &$form_state)

 

In the function ,which is being called during ajax callback try to write the &form and &$form_state,

without this our ajax callback cannot return any element.

ajax_waytocode_callback($form, $form_state)