Calling a function after an #AJAX event (Drupal 7)

Public

src: http://www.jaypan.com/tutorial/calling-function-after-ajax-event-drupal-7
The setup: Register a path, and build a form

The first thing we need to do is build a form that we can use for the tutorial. So we will register a path allowing us to access the form. In this example, we will be creating a module named after_ajax. First, our hook_menu() implementation:

Get raw version
php
  1. function after_ajax_menu()
  2. {
  3. $menu['after_ajax'] = array
  4. (
  5. 'title' => 'After Ajax example',
  6. 'page callback' => 'drupal_get_form',
  7. 'page arguments' => array('after_ajax_form'),
  8. 'access arguments' => array('access content'),
  9. );
  10. return $menu;
  11. }

the form

Get raw version
php
  1. function after_ajax_form($form, &$form_state)
  2. {
  3. // First we create a form element with AJAX enabled
  4. $form['ajax_example'] = array
  5. (
  6. '#type' => 'select',
  7. '#title' => t('Change me'),
  8. // Note that I am setting the value and the display of the elements to be the same, for convenience sake in our callback function
  9. '#options' => array(t('Select something') => t('Select something'), t('Something selected') => t('Something selected')),
  10. '#prefix' => '<div id="after_ajax_element_wrapper">',
  11. '#suffix' => '</div>',
  12. '#ajax' => array
  13. (
  14. 'callback' => 'after_ajax_ajax_callback',
  15. 'event' => 'change',
  16. ),
  17. );
  18.  
  19. // Next we add our JavaScript file, named after_ajax.js. This file
  20. // lives in the /js folder inside our module:
  21. $form['#attached']['js'] = array
  22. (
  23. array
  24. (
  25. 'type' => 'file',
  26. 'data' => drupal_get_path('module', 'after_ajax') . '/js/after_ajax.js',
  27. ),
  28. );
  29. return $form;
  30. }

So at this point, we have created a menu path at /after_ajax, and a form that has a single select element that will fire an #AJAX event when the select element is changed. We have also added a JavaScript file that will contain our custom functions to be called after the #AJAX event is complete.

The Ajax callback function

The next thing we need to do is create our #AJAX callback that we defined above, after_ajax_ajax_callback():

Get raw version
php
  1. function after_ajax_ajax_callback($form, &$form_state)
  2. {
  3. // First, we initialize our $commands array. This array will
  4. // contain each of the commands we want to fire for our
  5. // #AJAX callback:
  6. $commands = array();
  7.  
  8. // Next, we create our insert function that will insert our updated content
  9. // back into the page. To do this, we use the system provided
  10. // ajax_command_html() function. We pass this function two values:
  11. // 1) Our AJAX wrapper (that we defined as the #prefix and #suffix of our form element)
  12. // 2) The rendered HTML that needs to be inserted into the wrapper in the page.
  13. $commands[] = ajax_command_html('#after_ajax_element_wrapper', render($form['ajax_example']));
  14.  
  15. // Next, we will use the system provided ajax_command_alert() function as an example to show it's
  16. // working:
  17. $commands[] = ajax_command_alert(t('ajax_command_alert() is working'));
  18.  
  19. // Next we will include a custom function that we will call ourselves in our JavaScript file:
  20. $commands[] = array
  21. (
  22. // The command will be used in our JavaScript file (see next section)
  23. 'command' => 'afterAjaxCallbackExample',
  24. // We pass the value that the user selected in the select element to our
  25. // JavaScript function:
  26. 'selectedValue' => $form_state['values']['ajax_example'],
  27. );
  28.  
  29. // And finally, we will return all of our commands to the system to be executed:
  30. return array('#type' => 'ajax', '#commands' => $commands);
  31. }

In the above piece of code, we perform three actions. The first is to insert our HTML into the page - as you will generally do on any AJAX callback. The next is to use one of the system defined ajax_command functions, as an example of how they work, and last we create our own ajax command, to be used in our callback.

The JavaScript

The last thing we need to do is define our custom JavaScript command, afterAjaxCallbackExample, that we used in our Ajax Callback function above. This code is defined in oiur after_ajax.js file that we included in our form definition:

we prototyped the Drupal.ajax.commands object with our custom function, then inside that function we used the value we passed to display the selected value to the user.

And that's that! Now whenever we need to call a function after an #AJAX event, we can either use a pre-defined, system-provided ajax_command function, or we can define our own custom function when no system function exists!

Get raw version
javascript
  1. (function($, Drupal)
  2. {
  3. // Our function name is prototyped as part of the Drupal.ajax namespace, adding to the commands:
  4. Drupal.ajax.prototype.commands.afterAjaxCallbackExample = function(ajax, response, status)
  5. {
  6. // The value we passed in our Ajax callback function will be available inside the
  7. // response object. Since we defined it as selectedValue in our callback, it will be
  8. // available in response.selectedValue. Usually we would not use an alert() function
  9. // as we could use ajax_command_alert() to do it without having to define a custom
  10. // ajax command, but for the purpose of demonstration, we will use an alert() function
  11. // here:
  12. alert(response.selectedValue);
  13. };
  14. }(jQuery, Drupal));