7.x ajax.inc ajax_command_invoke($selector, $method, array $arguments = array())

Creates a Drupal Ajax 'invoke' command.

The 'invoke' command will instruct the client to invoke the given jQuery method with the supplied arguments on the elements matched by the given selector. Intended for simple jQuery commands, such as attr(), addClass(), removeClass(), toggleClass(), etc.

This command is implemented by Drupal.ajax.prototype.commands.invoke() defined in misc/ajax.js.


$selector: A jQuery selector string. If the command is a response to a request from an #ajax form element then this value can be NULL.

$method: The jQuery method to invoke.

$arguments: (optional) A list of arguments to the jQuery $method, if any.

Return value

An array suitable for use with the ajax_render() function.

Related topics

1 call to ajax_command_invoke()
ajax_forms_test_advanced_commands_invoke_callback in modules/simpletest/tests/ajax_forms_test.module
Ajax callback for 'invoke'.


includes/ajax.inc, line 1242
Functions for use with Drupal's Ajax framework.


function ajax_command_invoke($selector, $method, array $arguments = array()) {
  return array(
    'command' => 'invoke',
    'selector' => $selector,
    'method' => $method,
    'arguments' => $arguments,


ahabman’s picture

How do you use ajax_command_invoke? Are there any examples?

Is ajax_command_invoke the correct way to be thinking about getting Drupal to do an ajax callback (not using hook_menu or form api)?

Can you explain what "If the command is a response to a request from an #ajax form element" means?

What is "The jQuery method to invoke", and is a jQuery method somehow different than a javascript method?

Should ajax_command_invoke work inside a hook_views_pre_render()?

Is http://drupal.org/node/1028410 the best resource available?

Les Lim’s picture

For example, without AJAX, if you wanted to slowly fade in some content on your page, the jQuery you would use might look like this:

$('#my-content .my-image').hide();
$('#my-content .my-image').fadeIn(2000)

To execute these commands as a result of your Drupal AJAX call, you would put this in the Drupal page callback function responsible for generating the response:

	$commands[] = ajax_command_invoke('#my-content .my-image', 'hide');
	$commands[] = ajax_command_invoke('#my-content .my-image', 'fadeIn', array(2000));
	print ajax_render($commands);
familymangreg’s picture


I'm trying to use the following ajax callback for my form to replace several form elements at the same time. It works, but I don't see the ajax effects. I think this is because the commands are happening synchronously, so the 'replace' command for example is executed before the 'slideUp' has had chance to execute, so the user doesn't see the effect. At least that's my theory. If I remove the 'replace' commands in the below code, the user does see the effects.

Can anyone suggest if there is a way of executing these commands asynchronously, or alternatively a different approach to achieving the same end.

function ajax_payment_form_update_cardtype($form, &$form_state) {
  $commands = array();
  $commands[] = ajax_command_invoke('#confirm_wrapper, #personal_details_wrapper','slideUp');
  $commands[] = ajax_command_replace('#confirm_wrapper',render($form['confirm']));
  $commands[] = ajax_command_replace('#personal_details_wrapper',render($form['personal_details']));
  $commands[] = ajax_command_invoke('#card_details_inner','fadeOut');
  $commands[] = ajax_command_replace('#card_details_inner',render($form['card_details']['card_details_inner']));
  return array('#type' => 'ajax','#commands' => $commands);


fourmind’s picture

In case someone else comes across this and needs a little push, the $arguments array should be in the format:

  $arguments = array(
    array('arg1' => 'value'),
    array('arg2' => 'value2'),

This will produce the equivalent in javascript to:

{ "arg1":"value", "arg2":"value2" }

Might be good to add this to the documentation on this page.

JayKandari’s picture

Must pass correct argument structure else data passed is undefined. Thanks

masipila’s picture

Most of the ajax examples are about working with forms but there are not too many examples on how to create ajax links (ajax_example module has one simple example, though).

After searching and searching I found this excellent tutorial which shows how to write your own custom jquery plugin (your own .js file) and how to invoke it with ajax_command_invoke() after the ajax link has been clicked.


John Pitcairn’s picture

This works to trigger a custom jQuery event on the updated element. The module need not provide its own jQuery implementation.

    $commands[] = ajax_command_invoke($element_selector, 'trigger', array('myCustomEvent'));

It can be used by any behaviour script as follows:

(function ($) {
  Drupal.behaviors.myModule = {
    attach: function (context, settings) {
      $(document).delegate('#selector', 'myCustomEvent', function(ev, data) {
John Pitcairn’s picture

To pass additional data to the custom event:

$commands[] = ajax_command_invoke($element_selector, 'trigger', array(
    'item1' => 'value1',
    'item2' => 'value2',
vectorbross’s picture

The above examples passing arguments are not clear enough.

(function($) {
  $.fn.myJavascriptFunction = function(data) {

To get this to work you need to do this in php:

$commands[] = ajax_command_invoke($selector, 'myJavascriptFunction', array(
    'item1' => 'value1',
    'item2' => 'value2',

Notice the additional array containing the arguments.

COBadger’s picture

To set the value of a radio button, use the jquery .prop() method. In your console, if you can de-select a radio button using

$("#my-radio-button-id").prop('checked', FALSE),

the Drupal ajax command is:

$commands[] = ajax_command_invoke('#my-radio-button-id', 'val', array(array('checked' => FALSE)));

GuyPaddock’s picture

See my comment on ajax_command_replace() for a write-up on how to use this function to do a fade-out, fade-in swap.