Drupal FAPI is awesome !!... in this tutorial i'm gonna show you how to call a specific javascript function or to execute javascript code after ajax request using Drupal FAPI

Here is the summary of what we will do
1- Create our form using Drupal FAPI, Inside the form we will use #ajax attributes to create ajax function and load javascript_file_name.js file using #attached attribute.
2- Inside javascript_file_name.js we will create a new ajax Command which will be executed through the ajax callback function
3- We will call the JS function we just created from the ajax callback function

1- I created my form using Drupal FAPI. i use #ajax attribute to load a list of options for select field based on another field.

php
      //..
       // Some code
       //..
	$form['vehicle_year'] = array(
	  '#type' => 'select',
	  '#options' => $vehicle_year_options_array ,
	  '#attributes' => array('style' => "width:95%;"),	  
	  '#ajax' => array(  // I'm using ajax to call "_alshona_ajax_vehicle_make_return" function, which will return list of commands that will be executed using ajax
	    'callback' => "_alshona_ajax_vehicle_make_return",
	  ),
	  '#default_value' => $vehicle_year_default_value,
	);
	$form['vehicle_make'] = array(
	  '#type' => 'select',
	  '#options' => $vehicle_make_options_array ,
	  '#attributes' => array('style' => "width:95%;"),	  
	  '#prefix' => "<div id='wrapper-vehicle-make'>",
	  '#suffix' => "</div>",
	  '#ajax' => array(
	    'wrapper' => "wrapper-vehicle-model",
	    'callback' => "_alshona_ajax_vehicle_model_return",
	  ),
	);	
	$form['vehicle_model'] = array(
	  '#type' => 'select',
	  '#options' => $vehicle_model_options_array,
	  '#prefix' => "<div id='wrapper-vehicle-model'>",
	  '#suffix' => "</div>",	  
	  '#attributes' => array('style' => "width:95%;"),
 
	);
	$form['submit'] = array(
	  '#type' => 'submit',
	  '#value' => t('Find My Parts'),
	  '#attributes' => array('class' => array('find-my-parts-button')),
	);
       // i'm loading the javascript file, which contain the function that will be executed after changing <strong>$form['vehicle_make']</strong> using ajax
	$form['#attached']['js'][] = drupal_get_path("module", "my_module_name")."/js/javascript_file_name.js" ; 
	return $form;
}

Note that

  • i loaded javascript_file_name.js file using #attached attribute.
  • I use #ajax attribute, which call _alshona_ajax_vehicle_make_return function that will return the list of commands that will be executed after the ajax request.

2- Now inside the javascript_file_name.js, we will create the function / command that will be called after the ajax call

javascript
/**
 * Special Effects AJAX framework command.
 */
Drupal.ajax.prototype.commands.nameOfCommand =  function(ajax, response, status) {
  alert("Hello I'm Maged Eladawy...")  ; // this will be executed after the ajax call
}

3- Finally we call this ajax command from the ajax callback function _alshona_ajax_vehicle_make_return that we have created inside the #ajax attribute.

php
/**
 * 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 _alshona_ajax_vehicle_make_return($form, $form_state) {
 return array(
    '#type' => 'ajax',
    '#commands' => array(
      ajax_command_replace("#wrapper-vehicle-make", render($form['vehicle_make'])),
      ajax_command_replace("#wrapper-vehicle-model", render($form['vehicle_model'])),
      array('command' => 'nameOfCommand'), // This will call the command nameOfCommand we just created in the JS file.
    )
  );
}

Good Luck !