Drupal → Добавить класс определённому элементу перед выполнением ajax запроса

03.05.2017

Очень часто перед выполнением ajax запроса нужно добавить какому-то элементу определённый класс, а после получения ответа убрать его, чтобы например показать какую-нибудь анимашу, мол keep calm и всё такое.

Реализовать можно с помощью создания собственного типа ajax-прогресса:

(function ($) {
  if (Drupal.ajax) {
    var ajaxBeforeSend = Drupal.ajax.prototype.beforeSend;
    var ajaxSuccess = Drupal.ajax.prototype.success;
    var ajaxError = Drupal.ajax.prototype.error;

    Drupal.ajax.prototype.beforeSend = function(xmlhttprequest, options) {
      ajaxBeforeSend.apply(this, arguments);
      if (this.progress.type == 'class') {
        this.progress.targetElement = $(this.progress.target);
        this.progress.targetElement.addClass(this.progress.class);
      }
    };

    Drupal.ajax.prototype.success = function(response, status) {
      ajaxSuccess.apply(this, arguments);
      if (this.progress.type == 'class') {
        this.progress.targetElement.removeClass(this.progress.class);
      }
    };

    Drupal.ajax.prototype.error = function(xmlhttprequest, uri, customMessage) {
      ajaxError.apply(this, arguments);
      if (this.progress.type == 'class') {
        this.progress.targetElement.removeClass(this.progress.class);
      }
    };
  }
}(jQuery));

Использовать так:

$form['submit'] = array(
  ...
  '#ajax' => array(
    ...
    'progress' => array(
      'type' => 'class',         // Наш кастомный тип прогресса
      'target' => '#my-form-id', // Селектор элемента, на который будет навешиваться класс
      'class' => 'ajax-loading', // Класс
    ),
  ),
);

Версия для Drupal 8.

Написанное актуально для
Drupal 7
Похожие записи

Добавить комментарий