Почему страница вьюшки все равно перезагружается при клике на значение фильтра после того как добавил такой js код?

Главные вкладки

Аватар пользователя nathan158 nathan158 20 сентября 2022 в 14:33

У меня была проблема, два фильтра вьюшки (VERF selector) от модуля Views Entity Reference Filter, при выборе какого-либо значения перезагружают страницу при том что включен аякс. Оказалось причина в том что в настройках Better exposed filters была галочка Enable auto-submit.

Подсказали решение:
Чтобы при клике на значение фильтра страница не перезагружалась надо навесить на verf-элементы свой ивент click или change, с preventDefault внутри и эмуляцией клика на автосабмит кнопку.

Что я и попробовал сделать:

(function($, Drupal) {
  Drupal.behaviors.verfFiltersClick = {
    attach: function attach(context) {
      $('.product-list-wrapper .exposed-wrapper .views-exposed-form', context).once(
'verfFiltersClick').on('change', function (e) {
        e.preventDefault();
        $(this).find('input.form-submit').trigger('click');
        }
      );
    }
  };

})(jQuery, Drupal);

Но все равно страница перезагружаеться. Где я здесь допустил ошибку?
Структура разметки в Inspector вот такая:

<div class="product-list-wrapper">
  <div class="exposed-wrapper">
    <div class="views-exposed-form">

      <details class="form-item" data-drupal-selector="edit-field-entity-product-category-target-id-verf-collapsible">
        <div data-drupal-selector="edit-field-entity-product-category-target-id-verf" class="form-select">
          <ul>
            <li>
              <a href="/list?field_entity_product_category_target_id_verf=366" class="bef-link">Accessories</a>
              <a href="/list?field_entity_product_category_target_id_verf=313" class="bef-link">Crew Neck T-Shirts</a>
            </li>
            <li></li>
          </ul>
        </div>
      </details>
      ... // other exposed form filters
      <details class="form-item" data-drupal-selector="edit-field-entity-product-type-target-id-verf-collapsible">
      </details>

      <div class="form-actions">
        <input data-bef-auto-submit-click data-drupal-selector="edit-submit-list-of-products" class="form-submit">
      </div>

    </div>
  </div>
</div>

Комментарии

Аватар пользователя OldWarrior OldWarrior 20 сентября 2022 в 15:34
1

Зачем здесь пробел в имени селектора input.form-submit?

...
$(this).find(' input.form-submit').trigger('click');
...

Честно говоря, формулировка задачи какая-то запутанная. Непонятно: вы хотите или таки не хотите автосабмитить форму при смене значения фильтра? Если не хотите, то зачем эмулировать клик на input.form-submit?

Есть ощущение, что задача решается как бы "не с того конца".