Как инициировать вызов функции JavaScript в Drupal 10 с помощью AJAX?

Question

Фуад

drupal , ajax , javascript

Как инициировать вызов функции JavaScript в Drupal 10 с помощью AJAX?

Здравствуйте! <br/> У меня есть форма, реализующая AJAX интерфейс, и в ней имеется следующий фрагмент кода: <br/> <pre><code class="php">public function ajaxCallback(array &amp;$form, FormStateInterface $form_state)
  {
      $response = new AjaxResponse();
      $response-&gt;addCommand(new InvokeCommand('document', 'sendMessage', ['test']));
      return $response;
  }</code></pre> <br/> <br/> Также есть подключенный JavaScript, который создает вызываемую функцию: <br/> <pre><code class="javascript">(function ($, Drupal, drupalSettings) {

  $(document).ready(function(){

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

  });

})(jQuery, Drupal, drupalSettings);</code></pre> <br/> <br/> Я подтверждаю, что функция действительно создается, и точка останова срабатывает. <br/> Однако при попытке вызвать её через AJAX возникает ошибка: <br/> <blockquote>Произошла ошибка во время выполнения ответа Ajax: TypeError: $element[response.method] is not a function</blockquote> <br/> <br/> У меня сложилось впечатление, что вызов происходит в другой области видимости. Я пробовал вызвать addClass у одного из объектов, и это срабатывает отлично. Но подключения функции к этому объекту, к сожалению, не удается реализовать. <br/> <br/> Я уже несколько дней пытаюсь разобраться с этой проблемой. Не могли бы Вы объяснить, как правильно объявить функцию, чтобы Drupal AJAX мог её увидеть?

29 сентября 2024 г. 15:03

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваша проблема заключается в том, что вы пытаетесь вызвать пользовательское событие (или функцию) через AJAX, но не делаете это правильно, поскольку вызов `InvokeCommand` пытается вызвать метод на элементе, который не является функцией.

Давайте рассмотрим, как правильно инициировать вызов вашей функции JavaScript через AJAX в Drupal 10.

### 1. Используйте JavaScript события вместо методов

Вместо того чтобы пытаться вызвать функцию с помощью `InvokeCommand`, вы можете использовать встроенные события jQuery для вашей задачи. Это позволяет избежать проблем с областью видимости и сделать ваш код более чистым.

### Обновите ваш PHP-код

Вместо использования `InvokeCommand`, мы просто отправим данные AJAX, которые слушает ваше событие:

```php
public function ajaxCallback(array &$form, FormStateInterface $form_state) {
    $response = new AjaxResponse();
    // Здесь мы добавляем команду для отправки пользовательского события.
    $response->addCommand(new InvokeCommand('body', 'trigger', ['sendMessage', 'test']));
    return $response;
}
```

### Обновите ваш JavaScript

Соответственно, отредактируем ваш JavaScript, чтобы он слушал пользовательское событие:

```javascript
(function ($, Drupal, drupalSettings) {
  $(document).ready(function() {
    // Слушаем событие jQuery
    $(document).on('sendMessage', function(event, msg) {
      alert('MY_EVENT: ' + msg); // Выводим сообщение
    });
  });
})(jQuery, Drupal, drupalSettings);
```

### Пояснение изменений:

1. **Использование `InvokeCommand` с методом `trigger`:** Он позволяет отправлять события на указанный элемент (в данном случае, `body`). Это передаст ваши данные (в данном случае, `'test'`) вместе с событием `sendMessage`.

2. **Слушание события:** Мы используем jQuery для прослушивания события `sendMessage` на `document`. Когда это событие будет вызвано, ваш обработчик выполнит код и передаст сообщение.

### Заключение

Такой подход обеспечивает, что ваша функция будет правильно вызвана после выполнения AJAX-запроса, и не возникнет ошибка по поводу области видимости функции. Теперь после выполнения AJAX будет вызвано событие `sendMessage`, и Вы сможете обработать его в вашем JavaScript-коде, как и планировали.

Answer 2

Как объявить функцию так, чтобы drupal AJAX её увидел?
 
 ИМНИП никак: у Drupal-а нет команды для вызова произвольных функций, а вызываемая — для выполнения методов jQuery; да и приведённый код на стороне jQuery — не объявление ни функции, ни метода 
 
 на галлюцинациях о разных областях видимости останавливаться не буду, т.к. вдумчивое прочтение документации приводит к просветлению 
 
 а чтобы вся эта система хоть как-то заработала, команда должна выглядеть как-то так: 
 new InvokeCommand('document', 'trigger', [ 'sendMessage', 'test', ])
 
 а обработчик события как-то так: 
 function(e, msg) {
  alert('MY_EVENT');
}