Multiple jQuery UI sliders on page - module Views Block Exposed Filter Blocks

Created on 19 September 2022, almost 2 years ago
Updated 31 May 2024, 3 months ago

Problem/Motivation

When used module Views Block Exposed Filter Blocks, multiple jQuery UI sliders filters could be on page.

This code in bef_sliders.js collects slider inputs with same data-drupal-selector.

var $inputs = $(once('slider-filter', "input[data-drupal-selector=" + data_selector + "], input[data-drupal-selector=" + data_selector + "-max], input[data-drupal-selector=" + data_selector + "-min]", context));

Normally there is one input for slider or two inputs for range slider. Module Views Block Exposed Filter Blocks creates same copy of form, so number of inputs is multiplied and this code could not work.

if ($inputs.length === 1) {
// This is a single-value filter.
  ...
}
else if ($inputs.length === 2) {
// This is an in-between or not-in-between filter. Use a range
// filter and tie the min and max into the two input elements.
  ...
}

Problem occures only for anonymous users. Drupal.behaviors.better_exposed_filters_slider with context #document finds 4 inputs for 2 range sliders. When user is logged, context #document finds 2 inputs for first range slider and other 2 for context #block-viewsexposedfilterblock so everything works.

Proposed resolution

I replaced bef_slider.js with my own file with altered code, which collects inputs in each form separately.

(function ($, Drupal, drupalSettings, once) {
  Drupal.behaviors.better_exposed_filters_slider = {
    attach: function (context, settings) {
      if (drupalSettings.better_exposed_filters.slider) {
        $.each(drupalSettings.better_exposed_filters.slider_options, function (i, sliderOptions) {

          var data_selector = 'edit-' + sliderOptions.dataSelector;
  
          var slider_forms = $(once('slider-form', 'form', context));
          $.each(slider_forms, function(j, slider_form) {
          
            // Collect all possible input fields for this filter.
            var $inputs = $(once('slider-filter', "#"+$(slider_form).attr('id')+" input[data-drupal-selector=" + data_selector + "], #"+$(slider_form).attr('id')+" input[data-drupal-selector=" + data_selector + "-max], #"+$(slider_form).attr('id')+" input[data-drupal-selector=" + data_selector + "-min]", context));
...
πŸ“Œ Task
Status

Closed: outdated

Version

6.0

Component

Code

Created by

πŸ‡¨πŸ‡ΏCzech Republic Xperd

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024