How can i call js function from drupal 10 ajax?

having code

 public function ajaxCallback(array &$form, FormStateInterface $form_state)
  {
      $response = new AjaxResponse();
      $response->addCommand(new InvokeCommand('document', 'sendMessage', ['test']));
      return $response;
  }

js code

(function ($, Drupal, drupalSettings) {

  $(document).ready(function(){

    $(document).bind('sendMessage', function(msg) {
      alert('MY_EVENT');
    });

  });

})(jQuery, Drupal, drupalSettings);

whan i call ajax function having error Ajax: TypeError: $element[response.method] is not a function

why it does not working? how can i call js function from drupal ajax?

The issue you’re encountering happens because InvokeCommand in Drupal is intended to call a jQuery function on an element or selector. In your case, you’re trying to call a custom event (sendMessage), which isn’t a jQuery function but a custom event handler.

The InvokeCommand method expects to call a function like .hide(), .show(), .addClass(), etc., but you’re passing an event (sendMessage) which causes the error Ajax: TypeError: $element[response.method] is not a function.

Solution:

To trigger a custom event using Drupal’s AJAX system, you should use PrependCommand, AppendCommand, or a CustomCommand to call your JavaScript function or trigger an event instead of InvokeCommand.

Here’s how you can fix this issue:

1. Use PrependCommand to Trigger Custom JS:

Update your PHP code to use PrependCommand instead of InvokeCommand. This will allow you to prepend a custom JavaScript call into your HTML and execute it.

php

Copy code

use Drupal\Core\Ajax\PrependCommand;
use Drupal\Core\Ajax\AjaxResponse;

public function ajaxCallback(array &$form, FormStateInterface $form_state)
{
    $response = new AjaxResponse();
    // Trigger a custom event with PrependCommand.
    $response->addCommand(new PrependCommand('body', '<script>jQuery(document).trigger("sendMessage", ["test"]);</script>'));
    return $response;
}

2. Update Your JavaScript:

In your JavaScript code, make sure the sendMessage event is being handled properly.

javascript

Copy code

(function ($, Drupal, drupalSettings) {
  $(document).ready(function() {
    // Listen for the custom 'sendMessage' event.
    $(document).on('sendMessage', function(event, msg) {
      alert('MY_EVENT: ' + msg);
    });
  });
})(jQuery, Drupal, drupalSettings);

How It Works:

  • In the PHP code, PrependCommand is used to inject a script that triggers the sendMessage event on the document object.
  • The JavaScript code listens for the sendMessage event and triggers the alert with the message passed from the server.

Why InvokeCommand Didn’t Work:

InvokeCommand is designed to call a jQuery function on a specific element or selector. Since sendMessage is a custom event and not a jQuery function, this caused the error. By using PrependCommand or even CustomCommand, you can execute arbitrary JavaScript that fits your need.

CustomCommand (Optional Alternative):

If you want more flexibility, you could define a custom command in Drupal and use it. But the above solution with PrependCommand should solve your issue without adding complexity.