0

I had a problem, with two view filters (VERF selector) from the Views Entity Reference Filter module, when selecting any value, reload the page while Use AJAX is enabled. It turned out that the reason was that in the Better exposed filters settings there was a checkbox Enable auto-submit.

Suggested solution:

So that when clicking on the filter value, the page does not reload, you need to hang your click or change event on the verf elements, with preventDefault inside, and trigger click a click(click simulation) on the auto-submit button.

What I tried to do:

(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);

But the page still reloads. Where did I make a mistake here?

The markup structure in the Inspector is as follows:

<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>
2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.