Blog/ How To Create Your Own Custom Drupal 7 AJAX Framework Command?

Drupal 7 comes with a lot of AJAX framework commands that you can use in the #ajax callback. Using these commands, you can replace any element, or remove it or do a lot of different things. Using ajax_command_invoke(), you can even call specific jQuery commands. But what if you want to do something more complex? In that case, you can create your own command and call it from PHP. Let's do it using an example.

Suppose using the AJAX framework, you want to replace a new value in place of the old value using "fadeIn" effect. Once it's replaced, you want to animate its font size to twice its size and then back down again so that the user knows exactly what was replaced. Let's start with a form and its AJAX callback function:

/**
 * An AJAX-enabled form.
 */
function mymodule_form($form, &$form_state) {
  $form = array();

  // A textfield for the user to input his name.
  $form['name'] = array(
    '#title' => t('Your Name'),
    '#type' => 'textfield',
  );

  // Blank output field which we will fill using AJAX.
  $form['output'] = array(
    '#prefix' => '<div id="output">',
    '#suffix' => '</div>',
    '#markup' => '',
  );

  // AJAX-enabled submit button.
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
    '#ajax' => array(
      'callback' => 'mymodule_form_ajax_callback',
    ),
    '#attached' => array(
      'js' => array(
        drupal_get_path('module', 'mymodule') . '/js/mymodule.special_effects.js' => array(
          'scope' => 'footer',
        ),
      ),
    ),
  );

  return $form;
}

/**
 * AJAX callback function for mymodule_form().
 */
function mymodule_form_ajax_callback($form, $form_state) {
  // Grab the name input by the user.
  $name = check_plain($form_state['values']['name']);

  // Invoke out Special Effects ajax command for the special effect we want to create.
  $commands = array();
  $commands[] = array(
    'command' => 'special_effects',
    'elementId' => 'output',
    'name' => $name,
    'duration' => 4000,
    'amplify' => 3,
  );

  // Send the command to the page.
  $page = array(
    '#type' => 'ajax',
    '#commands' => $commands,
  );
  return $page;
}

Now we need to create the AJAX framework command "special_effect". Create a file "js/mymodule.special_effects.js" in your module and write the following:

/**
 * Special Effects AJAX framework command.
 */
Drupal.ajax.commands.special_effects = function(ajax, response, status) {
  jQuery('#' + response.elementId).hide().text(response.name).fadeIn(response.duration, function() {
    var fontSize = parseInt($(this).css('font-size'));
    jQuery(this).animate({'font-size': (response.amplify * fontSize) + "px"}, 5000, function() {
      jQuery(this).animate({'font-size': fontSize + "px"}, 5000);
    });
  });
}

That's it. Here is how it looks: