Using ajax_command_invoke in Drupal 7

AJAX Callback: The mymodule_ajax_callback function returns an AJAX command to invoke a JavaScript method on a specific DOM element.

Source code viewer
/**
 * AJAX callback function.
 */
function mymodule_ajax_callback() {
  $commands = array();
 
  // Add a command to invoke a JavaScript method on a specific element.
  $commands[] = ajax_command_invoke('#my-element', 'myCustomMethod', array('arg1', 'arg2'));
 
  // Return the commands as a JSON response.
  return array('#type' => 'ajax', '#commands' => $commands);
}
 
/**
 * Implements hook_form_alter().
 */
function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'your_form_id') {
    $form['your_element'] = array(
      '#type' => 'button',
      '#value' => t('Click me'),
      '#ajax' => array(
        'callback' => 'mymodule_ajax_callback',
        'wrapper' => 'my-element-wrapper',
        'method' => 'replace',
        'effect' => 'fade',
      ),
    );
 
    $form['my_element_wrapper'] = array(
      '#type' => 'markup',
      '#markup' => '<div id="my-element">Original Content</div>',
    );
  }
}
Programming Language: PHP

JavaScript Behavior: The JavaScript file defines a custom method myCustomMethod using $.fn to ensure it's available on jQuery objects. This method is then invoked on the element with ID #my-element.

Source code viewer
(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Ensure the element exists in the current context.
      $('#my-element', context).once('myModuleBehavior', function () {
        // Define the custom method on the element using jQuery's fn.
        $.fn.myCustomMethod = function (arg1, arg2) {
          console.log('Method invoked with arguments:', arg1, arg2);
          // Perform some action, e.g., update the element's content.
          this.text('Updated with ' + arg1 + ' and ' + arg2);
        };
 
        // Invoke the method to ensure it's attached correctly.
        $(this).myCustomMethod('initial', 'setup');
      });
    }
  };
})(jQuery);
Programming Language: ECMAScript