xandeadx.ru Блог музицирующего веб-девелопера

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

Опубликовано в

Очень часто перед выполнением 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 7
Похожие записи

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании