AJAX in Drupal 7

All the Functions for use with Drupal's Ajax framework are situated at /includes/ajax.in

Drupal's Ajax framework is used to dynamically update parts of a page's HTML based on data from the server.

Upon a specified event, such as a button click, a callback function is triggered which performs server-side logic and may return updated markup, which is then replaced on-the-fly with no page refresh necessary.

The function ajax_commands_* where * is a place holder for further function names is a basically Ajax framework commands that we need to use frequently to update the code.

Sample Self calling Function :

(function($) {
  $(document).ready(function(){
        --------Your code here to execute upon document ready--------
    });
})(jQuery);

Sample functions in Drupal AJAX to achieve Ajax feature to edit comments...

1.
// Function to create simple form element in page..
function comment_example_form($form, &$form_state,$comment){
  $form = array();
  $form['status-comment-edit'] = array(
    '#type' => 'textarea',
    '#rows' => 3,
    '#required' => TRUE,
    '#default_value' => $comment->comment,
  );
  $form['save'] = array(
    '#type' => 'submit',
    '#value' => t('Update'),
  );
  $form['#cid'] = $comment->cid;
  return $form;
}

2.
// Function to get and render form element in $form field and
// adding ajax command to plug-in HTML code in that form on page
// Note, the return array with type and command
function fbss_comments_edit($comment) {
  $form_build = drupal_get_form("comment_example_form", $comment);
  $form = drupal_render($form_build);
  $commands[] = ajax_command_html('.comment-content'.$comment->cid.'',$form);
  return array('#type' => 'ajax', '#commands' => $commands);
}

3.
// Function to submit the data to be DB on clicking the submit button...
function comment_example_form_submit($form, &$form_state){
  db_update('fbss_comments')
    ->fields(array('comment' => $form_state['values']['status-comment-edit']))
    ->condition('cid', $form['#cid'])
    ->execute();
  $c = fbss_comments_load($form['#cid']);
  module_invoke_all('fbss_comments_after_save', $c, TRUE);
  if ($_GET['destination'] && $_GET['destination'] != 'fbss_comments/js/refresh') {
    $form_state['redirect'] = $_GET['destination'];
  } else {
    $form_state['redirect'] = '';
  }
  drupal_set_message(t('Status comment has been successfully edited.'));
}

Sample functions in Drupal AJAX to achieve Ajax feature on button submit...

1.
// Function to create simple form element in page..
function comment_example_form($form, &$form_state,$comment){
  $form = array();
  $form['comment'] = array(
    '#type' => 'textfield',
    '#title' => 'Enter Value :',
    '#required' => TRUE,
  );
  $form['save'] = array(
    '#type' => 'submit',
    '#value' => t('Update'),
    '#ajax' => array(
      'callback' => 'test_ajax_form_action',
      'effect' => 'fade',
    ),
  );
  $form['#cid'] = $comment->cid;
  return $form;
}

2.
// Function to submit the data to be DB on clicking the submit button...
function test_ajax_form_action(){
  db_update('fbss_comments')
    ->fields(array('comment' => $form_state['values']['comment']))
    ->condition('cid', $form['#cid'])
    ->execute();
  if ($_GET['destination'] && $_GET['destination'] != 'fbss_comments/js/refresh') {
    $form_state['redirect'] = $_GET['destination'];
  } else {
    $form_state['redirect'] = '';
  }
  drupal_set_message(t('Status comment has been successfully edited.'));
}

Drupal's Ajax framework is used to dynamically update parts of a page's HTML based on data from the server. Upon a specified event, such as a button click, a callback function is triggered which performs server-side logic and may return updated markup, which is then replaced on-the-fly with no page refresh necessary.

This framework creates a PHP macro language that allows the server to instruct JavaScript to perform actions on the client browser. When using forms, it can be used with the #ajax property. The #ajax property can be used to bind events to the Ajax framework. By default, #ajax uses 'system/ajax' as its path for submission and thus calls ajax_form_callback() and a defined #ajax['callback'] function. However, you may optionally specify a different path to request or a different callback function to invoke, which can return updated HTML or can also return a richer set of Ajax framework commands.

To implement Ajax handling in a form, add '#ajax' to the form definition of a field. That field will trigger an Ajax event when it is clicked (or changed, depending on the kind of field). #ajax supports the following parameters (either 'path' or 'callback' is required at least):

  #ajax['callback']:
    The callback to invoke to handle the server side of the Ajax event, which will receive a $form and $form_state as arguments, and returns a renderable array (most often a form or form fragment), an HTML string, or an array of Ajax commands. If returning a renderable array or a string, the value will replace the original element named in #ajax['wrapper'], and theme_status_messages() will be prepended to that element. (If the status messages are not wanted, return an array of Ajax commands instead.) #ajax['wrapper'] If an array of Ajax commands is returned, it will be executed by the calling code.

  #ajax['path']:
    The menu path to use for the request. This is often omitted and the default is used. This path should map to a menu page callback that returns data using ajax_render(). Defaults to 'system/ajax', which invokes ajax_form_callback(), eventually calling the function named in #ajax['callback']. If you use a custom path, you must set up the menu entry and handle the entire callback in your own code.

  #ajax['wrapper']:
    The CSS ID of the area to be replaced by the content returned by the #ajax['callback'] function. The content returned from the callback will replace the entire element named by #ajax['wrapper']. The wrapper is usually created using #prefix and #suffix properties in the form. Note that this is the wrapper ID, not a CSS selector. So to replace the element referred to by the CSS selector #some-selector on the page, use #ajax['wrapper'] = 'some-selector', not '#some-selector'.

  #ajax['effect']:
    The jQuery effect to use when placing the new HTML. Defaults to no effect. Valid options are 'none', 'slide', or 'fade'.

  #ajax['speed']:
    The effect speed to use. Defaults to 'slow'. May be 'slow', 'fast' or a number in milliseconds which represents the length  of time the effect should run.

  #ajax['event']:
    The JavaScript event to respond to. This is normally selected automatically for the type of form widget being used, and  is only needed if you need to override the default behavior.

  #ajax['prevent']:
    A JavaScript event to prevent when 'event' is triggered. Defaults to 'click' for #ajax on #type 'submit', 'button', and 'image_button'. Multiple events may be specified separated by spaces. For example, when binding #ajax behaviors to form buttons, pressing the ENTER key within a textfield triggers the 'click' event of the form's first submit button. Triggering Ajax in this situation leads to problems, like breaking autocomplete textfields.  Because of that, Ajax behaviors are bound to the 'mousedown' event on form buttons by default. However, binding to 'mousedown' rather than 'click' means that it is possible to trigger a click by pressing the mouse, holding the mouse button down until the Ajax request is complete and the button is re-enabled, and then releasing the mouse button.   For this case, 'prevent' can be set to 'click', so an additional event handler is bound to prevent such a click from triggering a non-Ajax form submission. This also prevents a textfield's ENTER press triggering a button's non-Ajax form submission behavior.

  #ajax['method']:
    The jQuery method to use to place the new HTML. Defaults to 'replaceWith'. May be: 'replaceWith', 'append',  'prepend', 'before', 'after', or 'html'. See the jQuery manipulators documentation for more information on these methods.

  #ajax['progress']:
    Choose either a throbber or progress bar that is displayed while awaiting a response from the callback, and add an optional message. Possible keys: 'type', 'message', 'url', 'interval'.

More information is available in the Form API Reference

AJAX-enabled forms in Drupal 7 offer dynamic form behavior with no page reloads and are easy to create and manipulate. They are a simple extension of the Drupal Form API.

To create an AJAX-enabled form, you:

1. Mark a form element as AJAX-enabled using the #ajax property. This form element will now trigger a background AJAX call when it is changed or clicked.
2. The #ajax['wrapper'] property includes the HTML ID of a page section that should be replaced (or altered in some other way).
3. The #ajax['callback'] tells the Form system what callback should be called after the AJAX call happens and the form is rebuilt
4. Create a callback function (named by the #ajax['callback']). This is generally a very simple function which does nothing but select and return the portion of the form that is to be replaced on the original page.

:For EXAMPLE:

/**
* AJAX-enabled select element causes replacement of a set of checkboxes
* based on the selection.
*/
function ajax_example_autocheckboxes($form, &$form_state) {
    $default = !empty($form_state['values']['howmany_select']) ? $form_state['values']['howmany_select'] : 1;
    $form['howmany_select'] = array(
        '#title' => t('How many checkboxes do you want?'),
        '#type' => 'select',
        '#options' => array(1 => 1, 2 => 2, 3 => 3, 4 => 4),
        '#default_value' => $default,
        '#ajax' => array(
          'callback' => 'ajax_example_autocheckboxes_callback',
          'wrapper' => 'checkboxes-div',
          'method' => 'replace',
          'effect' => 'fade',
        ),
    );
    $form['checkboxes_fieldset'] = array(
        '#title' => t("Generated Checkboxes"),
        // The prefix/suffix provide the div that we're replacing, named by
        // #ajax['wrapper'] above.
        '#prefix' => '',
        '#suffix' => '',
        '#type' => 'fieldset',
        '#description' => t('This is where we get automatically generated checkboxes'),
    );
    $num_checkboxes = !empty($form_state['values']['howmany_select']) ? $form_state['values']['howmany_select'] : 1;
    for ($i = 1; $i <= $num_checkboxes; $i++) {
        $form['checkboxes_fieldset']["checkbox$i"] = array(
          '#type' => 'checkbox',
          '#title' => "Checkbox $i",
        );
    }
    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => t('Submit'),
    );
    return $form;
}
/**
* Callback element needs only select the portion of the form to be updated.
* Since #ajax['callback'] return can be HTML or a renderable array (or an
* array of commands), we can just return a piece of the form.
*/
function ajax_example_autocheckboxes_callback($form, $form_state) {
    return $form['checkboxes_fieldset'];
}

Here,

1. The form is presented to the user, as any form would be.
2. In the form, a div with an HTML ID of 'checkboxes-div' wraps $form['checkboxes']. This is done with
   $form['checkboxes']['#prefix'] and $form['checkboxes']['#suffix'].
3. If the user changes $form['howmany_select'], a background request is made to the server, causing the form to be rebuilt.
4. The form is rebuilt, with as many checkboxes as were requested by $form['howmany_select'].
5. ajax_example_autocheckboxes_callback() is called. It selects the piece of the form which is to be replaced on the page
   (almost always the same as what's in #ajax['wrapper']).
6. The portion returned is rendered, sent back to the page, and the div with id 'checkboxes-div' is replaced on the page.
   // Add extra function to execute prior validations so as to merge the two entries...
   array_unshift($form['#validate'], 'merge_infi_recipients_to_forward');

-------------------------------------------------------------------------------------------------
:: All Basic AJAX functions and its explanations as of in ajax.in located as /includes/ ::
-------------------------------------------------------------------------------------------------