Drupal 7 execute javascript code after a ajax call

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.

      //..
       // 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

/**
 * 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.

/**
 * 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 !

Comments

Thank you a lot for this

Peter, Fri, 05/23/2014 - 15:47

Thank you a lot for this topic!!

I had this problem many times before! Each time I did crazy non-drupal-way things. Now I know the solution!
Bookmarked!

THANK YOU!

Robin, Fri, 07/04/2014 - 20:09

PERFECT! Works like a charm, first time!

More please :)

An interesting theme for us

RiseFutt, Sat, 07/05/2014 - 16:09

Hello...

JALLO

RAMON, Wed, 08/27/2014 - 17:37

:) :) :) :) :) :) :) :) :) :) :) :)

It's amazing

Guiu, Wed, 10/28/2015 - 14:16

Thank you! I needed do this and your post is the best solution!

Love U

Teo, Tue, 06/28/2016 - 21:41

TY A DAMN LOT! This is so simple!

passing data through

hshhhhh.name, Thu, 05/11/2017 - 13:34

And if you want to pass data to callback do it like:
function _alshona_ajax_vehicle_make_return($form, $form_state) {
return array(
'#type' => 'ajax',
'#commands' => array(
array('command' => 'nameOfCommand', 'any_key' => 'any_data_1'), // This will call the command nameOfCommand we just created in the JS file.
array('command' => 'nameOfCommand', 'any_key' => ['text' => 'any_data_2', 'html' => render($form['vehicle_make'])]), // This will call the command nameOfCommand we just created in the JS file.
)
);
}

return field as well

ankit admane, Fri, 05/26/2017 - 11:16

return $form['request_type'] how ro return this field as well along with this

Maged Eladawy

Inventor of the WEB...