Запрет Ajax от запуска сценария jQuery - PullRequest
Новая
       18

Запрет Ajax от запуска сценария jQuery

0 голосов
/ 27 марта 2019

Мы получили простой скрипт jQuery на сайте Drupal, который добавляет класс div с контентом: 

(function($) {
Drupal.behaviors.myHelpText = {
  attach: function (context, settings) {

    //code starts

//change placeholder text

$('.form-item-quantity').append('<span class="help-block">For orders over 10 call for volume pricing</span>');
$('.help-block').css("flex-basis", "100%"); 

    //code ends

  }
};
})(jQuery);

На странице есть Drupal Commerce и различные поля атрибутов продукта, которые обрабатываются Ajax каждый раз при выборе атрибута. И при этом наш скрипт вставляет одну и ту же дублирующую строку каждый раз при загрузке / обновлении Ajax.

Как этого избежать? Мы просто хотим, чтобы код jQuery работал один раз при загрузке страницы.

enter image description here

Ответы [ 3 ]

1 голос
/ 11 апреля 2019

Вы должны понимать, что drupal.behaviors срабатывает при загрузке страницы и , когда ajax возвращает результаты. Он спроектирован таким образом, потому что вы можете захотеть, чтобы ваш код снова запускался на результатах ajax, например, если вы обновляете часть страницы с помощью ajax, и для этого требуются обработчики событий или добавлен класс.

Переменная context является ключом здесь.

при первой загрузке страницы контекстом будет все окно, но когда ajax возвращает результат, контекст будет просто тем, что возвращает ajax.
Зная это, вы должны использовать context в ваших селекторах jquery.
например. 

(function($) {
  Drupal.behaviors.myHelpText = {
    attach: function (context, settings) {

    //code starts

    //change placeholder text

    $('.form-item-quantity', context).append('<span class="help-block">For orders over 10 call for volume pricing</span>');
    $('.help-block', context).css("flex-basis", "100%"); 

    //code ends

    }
  };
})(jQuery);

Для дополнительной защиты от обработки чего-либо несколько раз вы можете использовать jquery один раз (), но это обычно не требуется, если в селекторе используется переменная контекста. jQuery Once () отдельная библиотека, которая должна быть загружена.

1 голос
/ 27 марта 2019

Добавлять элемент можно только в том случае, если он не существует, в противном случае ничего не делать. 

(function($) {
  Drupal.behaviors.myHelpText = {
    attach: function (context, settings) {

      if (!document.getElementById('help')) { 
         $('.form-item-quantity').append(
            '<span id="help" class="help-block">For orders over 10 call for volume ricing</span>'
         );
         $('.help-block').css("flex-basis", "100%");
      }

     }
  };
})(jQuery);
0 голосов
/ 11 апреля 2019

Почему бы не использовать jQuery один раз? Моя мысль - это классический подход. Куча примеров живет в документах на drupal.org

$('.form-item-quantity').once('help-appended').append('<span class="help-block">For orders over 10 call for volume pricing</span>');

И я не уверен, что вам нужно применять стили через js. Файл CSS - лучшее место для этого. И jquery должен быть доступен в вашей среде. Вот и все.

...