Запуск изменений на входе - PullRequest
Новая
       36

Запуск изменений на входе

0 голосов
/ 27 мая 2018

Я написал некоторый код, который изменяет количество ввода на веб-сайте электронной коммерции magento 1.9. 

jQuery("input.qty").val("10");

Проблема заключается в том, что JavaScript не запускает итоговое обновление.Я нашел код ответственным, и он выглядит так: 

(function() {
  var qtyFields = $('super-product-list').select('input.qty');
  qtyFields.each(function(el) {
    el.observe("change", updateGroupedPrice);

  });

  Event.observe(window, "load", updateGroupedPrice);

  function updateGroupedPrice() {
    //do stuff
  }
})();

Я думаю, что это использует prototype.js, но я пытался изолировать его в коде, но не смог заставить его работать.

Я пытался вызвать событие изменения следующим образом: 

jQuery("input.qty").trigger("change")

Но это не работает.Я также запускал множество других событий, но в инструментах разработчика он показывает код, прослушивающий «изменение».

Кто-нибудь знает, почему я не могу вызвать изменение?

1 Ответ

0 голосов
/ 27 мая 2018

Поскольку страница использует Prototype.js, вы должны продолжать использовать это, чтобы вызвать ваши изменения.Если вы введете в него jQuery, вы а) загрузите еще один полный дубликат того, что уже делает Prototype, и б) попросите много проблем, выделяя тот факт, что $() является методом в обеих библиотеках.

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

Код прототипа, который вы видите здесь, устанавливает «слушателя» для изменений того, что вы бы указали в jQuery как $(#super-product-list input.qty) входы.

jQuery всегда обрабатывает $() как возвращающий массив объектов, и, таким образом, все его методы действуют на массив, даже если он содержит только один член.Прототип имеет два разных метода для доступа к элементам в DOM: $('some_id'), который всегда возвращает один элемент (или ни одного, если нет совпадений), и $$('some css selector'), который всегда возвращает массив (из нуля или более совпадающих элементов).Вы будете писать (или использовать собственные) методы обратного вызова по-разному, в зависимости от того, какой метод доступа вы использовали для сбора элементов.

Если вы хотите изменить один из этих входов, вам необходимо изолировать его передустановить его значение.

Допустим, есть три селектора выбора с именем класса qty в вашем элементе #super-product-list.Вы хотите изменить третий на 10: 

$('super-product-list').select('input.qty').last().setValue('10');

Или, намного умнее, добавить третий идентификатор, и тогда ваш код будет намного короче: 

$('quantity_3').setValue('10');

В любом случае это отправит событие "change" из вашего выбора, а метод updateGroupedPrice будет наблюдать это и делать то, что вы его запрограммировали.

Вам не нужно (и не нужно) запускать событие change - это «родное» событие, и браузер владеет им.jQuery's trigger() (который в Prototype fire(), используется исключительно для "синтетических событий", как вы видите в Bootstrap: show.bs.modal, hide.bs.modal и т. д. Вы можете определить их по пунктуации в их именах; обычноточки или двоеточия для именования событий и избежания коллизий с другим кодом.

Наконец, если вы действительно, действительно, действительно хотите изменить каждый элемент #super-product-list select.qty на всей странице на '10', вы должны сделатьэто в Prototype.js: 

$$('#super-product-list select.qty').invoke('setValue', 10);
...