NOTE: This handbook page, like all documentation on drupal.org, is a community effort. If you have any corrections please edit this page. If you have any suggestions, feature requests, or bug reports please post them in the Better Exposed Filters issue queue.

The Better Exposed Filters (BEF) module replaces the default single- or multi-select boxes that normally appear in Views' exposed filters with radio buttons or checkboxes, respectively. It can also replace date filter with a jQuery UI datepicker or yes/no filters with a single checkbox or (coming soon!) numerical filters with jQuery UI sliders. A description field or Select All/None links can be added to exposed filters to make for a better user experience. A full list of what filter options are available can be found here.

Versions

Drupal 7.x or Drupal 6.x? Views 2.x or Views 3.x? Confused? Me too...

Better Exposed Filters was recently re-versioned to make things easier:

  • Drupal 6.x with Views 2.x: Use BEF 6.x-2.x
  • Drupal 6.x with Views 3.x: Use BEF 6.x-3.x
  • Drupal 7.x with Views 3.x: Use BEF 7.x-3.x

The Drupal 8 branch is in active development. Visit the Better Exposed Filters Drupal 8 project page.

Note: Once a final 6.x-2.0 release is made, this will become a bug-fix-only branch.

Background

Views Filters is a powerful tool that refines the results of a given view. When you expose a filter, you allow the user to interact with the view making it easy to build a customized advanced search. For example, exposing the node type field as a filter lets your site visitor limit their search queries to just blog entries. Better Exposed Filters gives you greater control over the rendering of exposed filters.

Why use this module? Try telling a client that they should click on an option, then scroll to the next option and ctrl+click on it. Don't just click 'cause you'll lose your first selection. Oh, and ctrl+click again to unselect an option. And if you're on a Mac... Yeah, not user friendly.

People understand checkboxes.

Installation

Requirements

Better Exposed Filters installs just like any other module in Drupal. Rather than repeating those instructions, I'll point you at the handbook pages devoted to this:

Drupal 5 and 6
Drupal 7
Drupal 8

BEF has been tested with the current release of Views 2.x and Views 3.x (2.9 and Alpha3, respectively, as of this writing). It should be noted that there is currently no migration path between Views 2.x and Views 3.x for BEF settings. See #714444: Need a way to upgrade BEF settings from Views 2.x to Views 3.x for more information.

All BEF settings are displayed in the exposed filter dialog (Views 2.x) or the exposed form settings dialog (Views 3.x), so there is no BEF-specific settings page.

Usage

Once installed, edit or create a view with an exposed filter. BEF only operates on fields that have a limited number of options such as Node:Type or Taxonomy:TermID. Open-ended fields, such as Node:Title, do not work with BEF. Entity References do work, however, if you Enable Render Views filters as select list (a checkbox) in the Entity's entityreference field. This is a limitation of Views and the current list of filter plugins. Consider adding a feature request to the Views issue queue if a filter you need is unavailable to BEF.

The BEF options show up in different places between Views 2.x and Views 3.x. In Views 2.x you can find the BEF options right alongside the other exposed filter options.

Views 3.x introduced the concept of exposed form plugins. Now getting BEF to operate is a two step process:

  1. Edit the view in question
  2. In the Exposed form block click on the link besides Exposed form style and select Better Exposed Filters from the options. In Drupal 7, the Exposed form block is located in the Advanced section.

    Better Exposed Filters Style
  3. When you click Update you will be presented with the various BEF options available for your filters. To return to this settings form, click the gear icon besides Exposed form style. In Drupal 7, you return to the settings page by clicking the BEF settings link instead.

Styling Better Exposed Filters

BEF provides some additional HTML structure to help you style your exposed filters. Here are some common examples. You can use Views exposed form layout module to group fields by regions.

Optgroups

Optgroups allow you add a basic hierarchy to a select element. If you are listing locations, you might group them by country. In a CCK field, you would set the "Allowed values" to PHP and include code similar to:

return array(
  'MX' => 'Mexico',
  'United States' => array(
    'AL' => 'Alabama',
    'AK' => 'Alaska',
    'AZ' => 'Arizona',
    ...
  ),
  'Canada' => array(
    'AB' => 'Alberta',
    'BC' => 'British Columbia',
    'MB' => 'Manitoba',
    ...
  ),
);

(With apologies to Mexico -- I know there are Mexican states, but I wanted to show top-level and optgroup options...)

The browser handles the display of optgroups in select elements. To style BEF checkboxes similarly, you would add CSS code similar to:

.bef-group-heading {
  font-weight: bold;
}
.bef-group-items {
  margin-left: 1.5em;
}

Or get a little more fancy with something like:

.bef-group-heading {
  font-weight: bold;
  padding-left: .5em;
}
.bef-group-items {
  margin: 0 0 .5em .75em;
  padding: .5em 0 0 .75em;
  border-left: 1px dotted #666;
  border-bottom: 1px dotted #666;
}

Scrollable checkbox/radio button lists

A long list of checkbox or radio button options can be just as poor a user experience as the original. To tame a long list of options, consider placing them within a scrollable region. BEF adds the necessary HTML structure to do this with just a little CSS:

.bef-checkboxes,
.bef-select-as-radios .form-radios {
  /*
   * Setting the height and overflow creates a scrollable <div> for the radio/checkbox elements.
   * The border is just for looks -- adjust or remove as needed.
   */
  height: 150px;
  overflow: auto;
  border: 1px solid #999;
}

/* Line up multi-line options nicely */
.bef-checkboxes .form-item,
.bef-select-as-radios .form-radios .form-item {
  text-indent: -24px;
  margin-left: 24px;
}

Select All/None link

The (optional) select all/none link can be styled using the .bef-toggle selector. For example:

.bef-toggle {
  text-align: right;
  font-size: 85%;
  display: block;
}

Tooltip-style help text

Better Exposed Filters allows you to add a description field to any exposed filter. This lets you provide contextual help to your site visitors, for example letting them know that a Node:Title exposed filter requires them to enter the exact title. (Unless you've changed the "Operator" settings).

If you don't want the descriptions cluttering your display, you can show/hide them using something similar to this:

if (Drupal.jsEnabled) {
  $(document).ready(function() {
    $('div.views-exposed-widget')
      .hover(function() {
        $('div.description', this).slideDown(250);
      }, function() {
        $('div.description', this).slideUp(250);
      })
     .find('div.description')
      .hide()
    ;
  });
}

Instant filter results using AJAX

Providing instant feedback of filter changes can also improve the user experience. Using Views' built-in AJAX paging and a little JavaScript, we can update the search results every time the user ticks a checkbox or changes a radio button option.

In your view, under the "Basic settings" section set AJAX to "No". Add the following JavaScript to your theme. This is best done with in a custom JavaScript file, but could be done using drupal_add_js() from your theme's template.php file in a pinch.

Drupal 6:

Drupal.behaviors.bef_live_filter = function(context) {
  // Only execute on first document ready
  if (context.nodeName == '#document') {
    // Hide the apply button.
    $('.views-exposed-form input:submit').hide();
  
    // When the change event fires, run the submit handler
    $('.views-exposed-form input').change(function(event) {
      $(this).parents('form').submit();
    }); 
  }
}

(Thanks to bkosborne for correcting this snippet).

This code assumes there is only one set of exposed filters on the page. The wait cursor will appear where the Apply button used to be.

Drupal 7:

(function($) {
  Drupal.behaviors.bef_live_filter = {
    attach: function(context, settings) {
      // Hide the apply button.
      $('.views-exposed-form input:submit', context).hide();
    
      // When the change event fires, run the submit handler
      $('.views-exposed-form input, .views-exposed-form select', context).change(function(event) {
        $(this).parents('form').find('.views-exposed-form input:submit').click();
      });
    }
  }
})(jQuery);

Alternative solutions:

  • Alternatively you could use the Views Hacks module that seems to work very well, and also give you the ability to add a RESET button to exposed filters.

Using the jQuery Slider widget with the "In between" filter

NOTE: The 7.x-3.x branch has support for jQuery Sliders and Datepickers built into BEF. The following is only for the 6.x branch.

While outside the scope of the Better Exposed Filters project, this was a common request in the issue queue so I'm including a recipe for it here.

For numeric data types, Views provides an "In between" filter which can be exposed. This allows a site visitor to limit their search by a price range, for example. The jQuery UI project offers an excellent slider widget which provides a visual version of this filter. One could also vary this recipe to work with "less than" or "greater than" filters.

  • Download, install and enable version 2.x of the jQuery Update module. This includes jQuery 1.3 or greater.
  • Go to jQuery UI download page
    • Select 1.7.x in the right-hand "Version" sidebar
    • Check the "Core" and "Slider" checkboxes (and others, if you wish)
    • Optionally, select a theme
    • Click download
  • Unzip the downloaded file
    • Place js/jquery-ui-1.7.2.custom.min.js and css/jQuery-UI-theme-name/jquery-ui-1.7.2.custom.css into your theme directory, for example, /sites/example.com/themes/my_theme/includes/jquery-ui-1.7.2.custom.min.js and /sites/example.com/themes/my_theme/includes/jquery-ui-1.7.2.custom.css
    • Optionally, copy the css/jQuery-UI-theme-name/images directory into the same location as the jquery-ui-1.7.2.custom.css file
  • Edit your theme's info file to include these two new files. If you don't already have one, add a custom.js (or similar) file while you're there.
    • For example, my_theme.info would look like:
      ; Previous style sheet
      stylesheets[all][] = style.css
      
      ; New Slider stylesheet
      stylesheets[all][] = includes/jquery-ui-1.7.2.custom.css
      
      ; New jQuery UI JavaScript 
      scripts[] = includes/jquery-ui-1.7.2.custom.min.js
      
      ; Your theme's JavaScript file must come after the jQuery UI file
      scripts[] = includes/custom.js
      
  • Create a new View
    • Add a filter for a numeric field
    • Click "Expose"
    • Select "Is between" for the operator
    • Set the "Filter identifier" to something something that describes the filter -- the default option is fine, though a bit long. In this example, I use "slider_filter" which doesn't exactly describe the filter, but this is just an example...
    • Click update and save the view
  • Add the following code to your custom.js:
    if (Drupal.jsEnabled) {
      Drupal.behaviors.test = function() {
        // NOTE: the exposed filter was given a filter identifier of "slider_filter".  Views
        // adds the "edit-" and "-min/-max" parts.  
        var min = $('input#edit-slider-filter-min');
        var max = $('input#edit-slider-filter-max');
        
        if (!min.length || !max.length) {
          // No min/max elements on this page
          return;
        }
        
        // Set default values or use those passed into the form
        var init_min = ('' == min.val()) ? 0 : min.val();
        var init_max = ('' == max.val()) ? 10 : max.val();
    
         // Set initial values of the slider 
        min.val(init_min);
        max.val(init_max);
    
        // Insert the slider before the min/max input elements 
        min.parents('div.views-widget').before(
          $('<div></div>').slider({
            range: true,
            min: 0,     // Adjust slider min and max to the range 
            max: 10,    // of the exposed filter.
            values: [init_min, init_max],
            slide: function(event, ui){
              // Update the form input elements with the new values when the slider moves
              min.val(ui.values[0]);
              max.val(ui.values[1]);
            }
          })
        );      // Add .hide() before the ';' to remove the input elements altogether.
      };
    }
    
  • Optionally, add some additional CSS code to your theme's main CSS file. This example put the input elements on a single line:
    #edit-slider-filter-max-wrapper,
    #edit-slider-filter-min-wrapper,
    #edit-slider-filter-max-wrapper label {
      margin-top: 5px;
      display: inline-block;
    }
    #edit-slider-filter-min,
    #edit-slider-filter-max {
      width: 30px;
    }
    #edit-slider-filter-max-wrapper label {
      width: 75px;
      text-align: center;
    }
    
  • Navigate to the page containing the view created above.

Comments

jimkomara’s picture

I am getting a javascript error on this line, and I haven't tracked it down yet.

// Insert the slider before the min/max input elements
min.parents('div.views-widget').before(

The error reads 'Object doesn't support this propert or method'

I have gone over the recipe many times and the only thing I found out of place was the version number was .3 instead of .2, which I changed in the example code.

Any advice would be much appreciated. - Jim

mikeker’s picture

It's probably not the jQueryUI version since the line you mentioned isn't engaging any of the Slider widget code. Check to see that there is a <div class='views-widget'> div on the page in question.

Another place to check is that your exposed filter ID and what you have in

    var min = $('input#edit-slider-filter-min');
    var max = $('input#edit-slider-filter-max');

What you put in the "filter identifier" should appear between "edit-" and "-min" (or "-max"). I may not have explained that very well in the instructions. In the example, "slider-filter" is what is entered in the "filter identifier" field.

Let me know if that solves the problem.

- Mike

bratsun’s picture

I'm using 2 BEF filters filled up with taxonomy terms. I found out that ajax method described here does not work for me. Sometimes it gets into continuously looped load (the system gets stuck with 2 lists I suppose) so I ended with not that stylish and actually not that ajaxy solution which still brings up the results without hitting the Submit button:

$('.views-exposed-form input[type="checkbox"]').click(function(){
$('.views-exposed-form .form-submit').click();
});

Also, scrollTo and visibility:hidden for the button itself makes a good addition to the trick.

ronaldofs’s picture

I got two exposed filters (2 taxonomies) working with ajax. At first I tried the BEF handbook suggested method but I kept getting HTTP GET multiplied everytime I changed some checkbox (same as you probably).

But then I added 'context' to the script and got it working like a charm:

Drupal.behaviors.myCustomBehavior = function (context) {
$('.views-exposed-form input', context).change(function() {
$(this).parents('form').submit();
});
};

I was going to try your trick... but got it working like this.
cheers

faizan_abid’s picture

Hi,

Thanks for the guidelines. But I followed all your steps, and I am still unable to see the slider on my website. Website is, www.lifeinsingapore.com.sg

I have no idea why it is happening. I checked that the div's referred in the script exist and I changed the filter name in the js. I used firebug and checked that the script does get added into my header. I have no idea what the problem is.

The jquery ui version is 1.7.3 and jquery update version is 2.

Can you please help me with this.

Thanks!

ah_ma81’s picture

Hi @faizan_abid
It would be nice from you if you can tell us too, how did you make the price in between as select list in your website http://www.lifeinsingapore.com.sg/?

Teezi’s picture

I see you got this working on your site. Any advice? I'm also using jquery 1.7.3, and jquery-update x 2 and can't seem to locate any problem.

petelefrank’s picture

Is it possible that it no longer works with the 1.7.3 version?

Would very much appreciate a solution.

petelefrank’s picture

Finally found the solution myself:
The problem was that my jquery wasn't up to date.
The reason for this seems to have been the recommended version of jquery update (6.x-1.1).
I installed the Alpha Version 6.x-2.0-alpha1 (http://drupal.org/node/779956). Working!

The website I'm working on is http://www.world-of-presents.com

faizan_abid’s picture

Hi, sorry for replying late.

The problem I faced was due to a syntax error in custom.js. May be I didn't copy it correctly. If you followed all the steps given here and it still isn't appearing, I'd advise you to recheck the custom.js syntax.

The Jquery version I am using is 1.7.3 and as said above the required jquery update plugin is 6.x-2.0-alpha1

And do make sure the div's referred to in the custom.js code do exist on your page.

Hope this helps

Anonymous’s picture

Hi,

I'm new to drupal and php, so the question might seem stupid, but...
Is it possible to make the filters appear as links instead of radio buttons or select list?
____________
select list:
option 1
option 2 SUBMIT
...
option n
____________

instead of that I would like something like this:

option 1 option 2 ... option n

How to change it?

mikeker’s picture

That's being built up in the -dev version. See #894312: Display Exposed Sort and Exposed Pager as links.

- Mike

Anonymous’s picture

Thanks, I've tried that but it doesn't work. Do you have any other idea?

luco’s picture

hey there,

thanks for the module and the "jQuery Slider widget with the 'In between' filter" snippet! they really helped me out.

I'd like to confirm that it works with jQuery 1.8.10, so if someone needs the latest version for other functionality, they can retain slider functionality.

also! if you don't see the slider, check the code. turns out that if the CSS file is misplaced, the module outputs code but the slider won't appear.

now I understand it's out of the module's scope, but you could benefit the noobs by making an official addition to your module and registering the dependency (something like a contrib module). right?

cheers,
Luciano

_________________________

"There is no off position on the genius switch."
- David Letterman

luco’s picture

actually the "jQuery Slider widget with the 'In between' filter" doesn't seem to be working on a block :( it just duplicates the slider each time the user presses the "apply" button. any ideas?

_________________________

"There is no off position on the genius switch."
- David Letterman

danon1981’s picture

To prevent the slider form duplicating on submit I gave each slider its own number

The first slider
"Drupal.behaviors.customSlider0"

Second slider
"Drupal.behaviors.customSlider1"

and maybe even a third slider
"Drupal.behaviors.customSlider2"

etc..

This worked for me

nagiek’s picture

Here's a list of steps to take for Drupal 7.

First, js and css should be added via the drupal_add_library('system','ui.slider') function in the template preprocess area.

Second, code has to be modified slightly due to different behaviour handling in Drupal 7.

Hope that helps anyone looking for the Drupal 7 solution!

(function ($) {
  Drupal.behaviors.customSlider = {
    attach: function() {
      // NOTE: the exposed filter was given a filter identifier of "slider-filter".  Views
      // adds the "edit-" and "-min/-max" parts.  

      var min = $("input#edit-slider-filter-min");
      var max = $("input#edit-slider-filter-max");

      if (!min.length || !max.length) {
        // No min/max elements on this page
        return;
      }
          
      // Set default values or use those passed into the form
      var init_min = ('' == min.val()) ? 0 : min.val();
      var init_max = ('' == max.val()) ? 10 : max.val();

       // Set initial values of the slider 
      min.val(init_min);
      max.val(init_max);

      // Insert the slider before the min/max input elements 
      min.parents('div.views-widget').before(
        $('<div></div>').slider({
          range: true,
          min: 0,     // Adjust slider min and max to the range 
          max: 10,    // of the exposed filter.
          values: [init_min, init_max],
          slide: function(event, ui){
            // Update the form input elements with the new values when the slider moves
            min.val(ui.values[0]);
            max.val(ui.values[1]);
          }
        })
      );      // Add .hide() before the ';' to remove the input elements altogether.
    }
  };

}(jQuery));
dddbbb’s picture

@nagiek Thanks for posting a possible D7 solution. I just tried the code that you posted in my template.php file but I'm getting an error. I'm guesing that the code that you have posted isn't ready to be literally copied and pasted. Could you provide any extra pointers as to how to implement this?

nagiek’s picture

did you change the slider-filter identifier at the top of the code?

Wappie08’s picture

Thanks Nagiek, this works beautifully!

One question: the only thing I did not get to work is making the jquery slider play along with the BEF auto-submit.. When altering the input values via jquery the form isn't submitted..
EDIT: answer is here: http://drupal.org/node/1005884#comment-4870638


PS instead of attach: function() { (row 3) use attach: $(document).ready(function() { so that the function isn't reloaded when there is an AJAX submit (resulting in numerous sliders!)..

Greetings Wappie

Jibus’s picture

I am not using the BEF auto-submit but i use the ajax submit feature from views.

When I submit the form, the filters are reloaded, i have a duplicate filters.

I used your solution without sucess. Any ideas ?

candelas’s picture

@Wappie08: thanks for your documentation.

It worked all for me but if I do as you said: attach: function() { (row 3) use attach: $(document).ready(function() { it doesn't work (i put an ending parenthesis at the bottom). The first time loads ok, but then it doesnt load.

I use drupal 7.14

I used the answer with http://drupal.org/node/1005884#comment-4870638. i mean:

 // after <strong>values: [init_min, init_max],</strong>
  stop: function(event, ui){
	$(this).parents('form').find('.ctools-auto-submit-click').click();
  },

I used Ajax and for not to get sliders duplicated (i have 4), i use this code before creating the slider.

$('div.ui-slider').remove();

Also, for getting the slider values on the label, i used

    // after the  var max = $("input#edit-slider-filter-max"); 
      var labeletiqueta = $("label[for='edit-slider-filter']"); //mine
     
 // Set initial values of the slider after the min and max values i assign to labeletiqueta 
      min.val(init_min); //this is in code
      max.val(init_max); //this is in code
      labeletiqueta.text("Precio " + min.val() + " - " + max.val()); //mine

// to Update the form input elements with the new values when the slider moves
   min.val(ui.values[0]); //this is in code
   max.val(ui.values[1]); //this is in code
				
   etiqueta.text("Precio " + ui.values[0] + " - " + ui.values[1]); //mine


I put the code, just in case someone can use it :)

//trying to answer one question for each one that i make.
//this way, drupal will be more friendly and strong

gynekolog’s picture

Thank you! Only You have a error on the bottom line, no etiqueta but labeletiqueta.

For other i post complet code by nagiek and candelas for Drupal 7 with autosubmit, no duplicates and with values on label:

(function ($) {
  Drupal.behaviors.customSlider = {
    attach: function() {
      // NOTE: the exposed filter was given a filter identifier of "slider-filter".  Views
      // adds the "edit-" and "-min/-max" parts.

      var min = $("input#edit-slider-filter-min");
      var max = $("input#edit-slider-filter-max");
      var labeletiqueta = $("label[for='edit-slider-filter']");

      if (!min.length || !max.length) {
        // No min/max elements on this page
        return;
      }

      // Set default values or use those passed into the form
      var init_min = ('' == min.val()) ? 0 : min.val();
      var init_max = ('' == max.val()) ? 2000 : max.val();

       // Set initial values of the slider
      min.val(init_min);
      max.val(init_max);
      labeletiqueta.text("Price " + min.val() + " - " + max.val());

      $('div.ui-slider').remove();
      // Insert the slider before the min/max input elements
      min.parents('div.views-widget').before(
        $('<div></div>').slider({
          range: true,
          min: 0,     // Adjust slider min and max to the range
          max: 2000,    // of the exposed filter.
          values: [init_min, init_max],
          slide: function(event, ui){
            // Update the form input elements with the new values when the slider moves
            min.val(ui.values[0]);
            max.val(ui.values[1]);
            labeletiqueta.text("Price " + ui.values[0] + " - " + ui.values[1]);
            },
                  stop: function(event, ui){
                  $(this).parents('form').find('.ctools-auto-submit-click').click();
                  }
        })
      );      // Add .hide() before the ';' to remove the input elements altogether.
    }
  };
}(jQuery));
nammourdesigns’s picture

This is very helpful but I ran into an issue. How can you have multiple jQuery ui scroller widgets on the same page? The issue I see is that we are adding the filter identifier as "slider-filter" and that is used as an id. I would love to be able to accomplish something like this (http://jqueryui.com/slider/#multiple-vertical). They don't need to be vertical but it is just the idea of using a class so that one function can control a lot of sliders. I appreciate any help you guys can give me on this.

Thanks in advance.

delboard’s picture

Thanks nagiek for your help, although I still can't make it work.

Could you please specify this:
"..js and css should be added via the drupal_add_library('system','ui.slider') function in the template preprocess area."

I've added the line "drupal_add_library('system','ui.slider')" to my template.php, but I guess I'm missing here something...

Update: The code in template.php was all right. The slider dissapears when I change line 3 as wappie suggested, instead of attach: function() { (row 3) use attach: $(document).ready(function() {

jacobmn’s picture

In delboard's update there is mention of the slider disappearing after submit. If this is happening, it's probably because you have the 'use AJAX: yes' setting on. Disable AJAX and this will work normally after applying the filter.

danon1981’s picture

I have set up the range sliders but IE7 and IE8 do not display correctly. Input fields are not displayed as a slider but as normal input fields.

I assume I'm not the only one encountering this and hope someone has a solution to this?

sstacks’s picture

danon1981, this is working in IE9 for me but do not have IE7 or IE8 to test.

adster13’s picture

I'm having no luck with this at all. Does this function just get put into the template.php file?

If I put it in the template.php file I am getting an error: Parse error: syntax error, unexpected T_FUNCTION on the line when the function starts.

sstacks’s picture

nagiek, thank you so much for posting the D7 version of the code. Worked great.

nags338228’s picture

Everything works really awesome. But one thing is can we display the range values at the top of the slider?

nagiek’s picture

Hi everyone.

I contributed a patch for this code, found here. Please apply the patch, test it, and direct all comments to the issue page.

Thanks!

marty.true’s picture

Beautiful output, only one small request/question...
How can we have commas inserted to represent thousands separator?

island_guy’s picture

Marty, did you ever find a solution to this?

hockey2112’s picture

I need this as well. Customers are adding commas as thousands separators in price search field.

Hadi Farnoud’s picture

I'm trying to create filters like ones in drupal.org header search box. How can I add those exposed filters into default search box?
I'm using apachesolr obviously.

cigotete’s picture

"jQuery Update module" cause conflicts in my Drupal. So, I resolved this not using "jQuery Update module" and pointing directly to some jquery version (for example: http://code.jquery.com/jquery-latest.js or a local version of this jquery-latest.js). The rest of instructions were useful for me. thanks!

one question. what is the reason to use jQuery Update module http://drupal.org/project/jquery_update to this slider widget? this module offer some additional features than jquery-latest.js? (sorry for my ignorance).

mikeker’s picture

The jQuery Update module provides a newer version of jquery.js than ships with the standard Drupal install. That is needed for the jQuery UI module, which includes the slider widget.

In Drupal 7, jQuery UI ships as part of the default install is this is not an issue. The hope it to start integrating some of these more user-friendly UI elements into BEF going forward. So far, I've only managed to include the jQuery datepicker for exposed date fields...

- Mike

eleonoreft’s picture

I'd like to implement the CSS that you provided above for the Scrollable checkbox lists, as I have nearly 100 terms that I want the users to filter by (these are countries) and definitely need checkbox functionality as holding down the CTRL key is not feasible for most users.

I was wondering where I should put the code. Should it be in the better exposed filters css file or in my theme (danland)'s css?

Same question for the css for the select all/none link.

I'm using Drupal 7.

Thanks!

mikeker’s picture

the CSS directives listed above should go in your theme's CSS file (danland in your case). For danland, take a look at the local-sample.css file for an example of how to build local overrides.

- Mike

eleonoreft’s picture

Fantastic - it works great. Thank you so much!

imoreno’s picture

The css for scroll bar works perfect.
I only have issues with changing it's direction.

The scroll bar is currently on the left side of the check boxes i need it to be on the right,
I needs some help with the css to adjust it.
??

StuartJ’s picture

Thanks!

NIKS_Artreaktor’s picture

version for drupal 6
jquery-ui-1.8.16.custom.min.js
...

can anybody help to synchronize : sets whether input fields are identical to slider fields.

Thank a lot.

cperezp’s picture

This is a feature request :}

I'm trying to implement a filtering interface, where the user filters as he/she ticks checkboxes corresponding to different terms in varied vocabularies.

Instead of having a long list of checkboxes, or having the user scroll a checkbox group (which I personally find weird), like the suggestion above, I'm thinking of implementing an accordion where all the checkboxes groups are accordion sections (since jQueryUI is already part of Drupal 7).

I was just thinking it would be a nice feature for the module to have, as I personally think having an accordion on the left hand-side with checkboxes and the results on the right-hand side (or the opposite), would be more user-friendly than laying out the filters' interface horizontally.

By the way... amazing module, thanks for the effort and hard work entailed in putting it together!

Becker-and-Becker’s picture

I have set this up, and it is working, but I would now like to change the increment(step) value, so instead of increasing by 1, it will increase by 100 or any value I set. Does anyone have any ideas? I had a look at http://jqueryui.com/demos/slider/#option-step but I am not sure where to add this code. If anyone could assist I would be grateful.

moditha’s picture

Hi All,

I am using Views 7.x-3.0 & BEF 7.x-3.0-beta1. Seeking help after trying all options. I am stuck at getting the exposed filter form [with 2 drop downs] in to a block (in sidebarfirst). Found few videos but they are for Drupal 6. Going through the brief help in the BEF section didn't help either. Checked BEF related questions in drupal.stackexchange.com and couldn't find an answer :(

So, thought forward the question here. This is what I have been doing;
1) Create a view which shows all content types as usual.
2) Exposed filters as explained in this thread for Drupal 7.

Outcome is, I get the filters and also the content below the filter controls. So, if I place the block in the left side bar, I still get the content below and filtering will happen at the same location. Ideally, the block should have only the controls and any changes should appear to the page.

I think there should be a good tutorial for Drupal 7 & BEF.

Any help is greatly appreciated.

akmalfikri’s picture

I'm also stuck with this, using BEF with Drupal 7. Any tutorial will highly appreciated.

plamenut’s picture

Hi there,
I have a Drupal 7 site project where the exposed filters are presented in a block using BEF (done) but the sort criteria (also exposed) need to be shown on top of the rendered view (like the default exposed sorting in views), though they're included in the same block cause there is no option to tell which exposed filter is to be used in block and which one - not.
Any clues, solutions or am i missing something?

cperezp’s picture

You can copy/paste "views-exposed-form.tpl.php" from views' "theme" directory, inside your theme, and edit it to your heart's contents.

I have achieved this, by making the 'sort by' positioning 'absolute' in the CSS, like here.

Hope it helps. :]

PedroKTFC’s picture

cperezp, I've looked at your site and if I've understood it correctly you seem to have mixed BEF with an accordion module. Is this correct? Which accordion module did you use and how did you manage to get the exposed filter to work with an accordion module. So far I've found that exposed filters just seem to be "invisible" to any normal theming - I can put them in a block but that's about it.

Much obliged for any help.

cperezp’s picture

I first copied "views-exposed-form.tpl.php" from the views module into my theme (under a 'templates' subdirectory), and edited so it would only show the needed markup for the exposed filters, in order for me to be able to convert them into an accordion:

<?php
// ... more code here...
<div class="views-exposed-form">
	<div class="views-exposed-widgets clearfix accordion">
	foreach ($widgets as $widget) {
		echo $widget->widget;
	}
	</div>
// ... more code here...
</div>
// ... more code here ...
?>

I used the jQuery_Plugins module to load the accordion library. I call it via the "template.php", by adding the following code (I am using Drupal 7):

<?php drupal_add_library('system', 'ui.accordion'); ?>

Then I created a JavaScript file, and added it to my ".info" file to modify the output of Better Exposed Filters in the DOM, since it outputs the filter heading (an H3) inside of the wrapper DIV tag (the one with "form-item" class), but the jQuery accordion requires the H3 to be outside, immediately before the DIV tag that is to become an accordion section (See here), in this case, our "form-item" which holds the group of checkboxes as an exposed filter. Here is the JavaScript code (very simple really):

<?php

// We namespace jQuery, just in case we need to use other javascript libraries
(function($) {

	// When the document and Drupal are ready
	Drupal.behaviors.yourthemename = {
		attach: function() {

			// Move the H3 out of the section, just before the container.
			$('.views-exposed-widgets > .form-item > h3').each(
				function() {
					$(this).parent().before($(this))
				}
			)

			// Instantiate the accordion
			$('.accordion').accordion({
				autoHeight: false,
				collapsible: false,
				active: false
				// icons: {
				//  'header': 'ui-icon-plus',
				//  'headerSelected': 'ui-icon-arrowthickstop-1-n'
				// }
			})

		}
	}

})(jQuery)

?>

Hope it helps! :)

atilla’s picture

1. Same as mentioned by luco in http://drupal.org/node/766974#comment-4206698. Every time I use the slider and press APPLY, one more slider adds itself just beneath the other. When using the InBetween text filed then they disappears again and the first slider stays.

2. How can I Auto Submit the slider? I am using D 6.22, JQuery 1.3.2. It works for the Text Field but not for the slider.

Support appreciated
Thank you

PedroKTFC’s picture

I like BEF, it provides exactly the functionality I want.... except! :o)

I'm using it to allow my site visitors to choose the brands they want to look at. However, not all my views will have all the brands in them (eg one view is for T shirts, another for shorts). Is there a way of limiting the list of check boxes to only those in the view?

Thanks

cigotete’s picture

If I understand well your question, in your exposed filter settings you can see the option "Limit list to selected items".

PedroKTFC’s picture

Sorry, I guess I wan't clear. Your suggestion is a limit on the choice in the list of vocabulary entries in the list on the exposed filter settings page. I'd like the check box list presented to the user to be limited to the brands I have in stock. So, say, I might have Nike Reebok and Puma available one day, but the next I might only have Nike and Puma. I'd like the list to be limited to that if possible.

jmatuska’s picture

Yes, i too am interested in a dynamic list in my BEF.
The exposed filter is STATE(s), but i only want certain states to appear in the list depending on a type of service that the user first selects. Not all services are offered in all states.
So i want that list to be populated when the user clicks on service type.
Any way of accomplishing this?
Thanks,
:) Jean

swamydrupal’s picture

select all/none links will not appear for default select list for Exposed Filter.

shrutijain’s picture

I insert all css code of Scrollable checkbox/radio button lists in my theme..works with mozilla/ie but not with chrome..plz help me

FridgeWheeL’s picture

Hi,

I have followed the steps as follow but to no avail. My sliders just wont show.
Tested on Firefox 14.0.1, Chrome 21.0.1180.79 and Internet Explorer Version 10.0.8400.0

-I downloaded and activated the Jquery Update 7.x-2.1+9-dev
-I downloaded jQuery UI (tried both 1.7.3 & 1.8.23)
-Placed the jquery-ui-1.7.3.custom.css & jquery-ui-1.7.3.custom.min.js as well as the images folder inside sites/all/themes/"my theme name"/includes
-created a new empty custom.js file as follow sites/all/themes/"my theme name"/custom.js
-Pasted the code for Drupal 7 custom.js by Nagiek and modified it as follow to match my filter identifier:

(function ($) {
  Drupal.behaviors.customSlider = {
    attach: function() {
      // NOTE: the exposed filter was given a filter identifier of "slider-filter".  Views
      // adds the "edit-" and "-min/-max" parts.  

      var min = $("input#edit-price-min");
      var max = $("input#edit-price-max");

      if (!min.length || !max.length) {
        // No min/max elements on this page
        return;
      }
          
      // Set default values or use those passed into the form
      var init_min = ('' == min.val()) ? 0 : min.val();
      var init_max = ('' == max.val()) ? 10 : max.val();

       // Set initial values of the slider 
      min.val(init_min);
      max.val(init_max);

      // Insert the slider before the min/max input elements 
      min.parents('div.views-widget').before(
        $('<div></div>').slider({
          range: true,
          min: 0,     // Adjust slider min and max to the range 
          max: 10,    // of the exposed filter.
          values: [init_min, init_max],
          slide: function(event, ui){
            // Update the form input elements with the new values when the slider moves
            min.val(ui.values[0]);
            max.val(ui.values[1]);
          }
        })
      );      // Add .hide() before the ';' to remove the input elements altogether.
    }
  };

}(jQuery));

-Modified my theme_name.info and added the following right at the top:

; Previous style sheet
stylesheets[all][] = style.css

; New Slider stylesheet
stylesheets[all][] = includes/jquery-ui-1.7.3.custom.css

; New jQuery UI JavaScript 
scripts[] = includes/jquery-ui-1.7.3.custom.js

; Your theme's JavaScript file must come after the jQuery UI file
scripts[] = includes/custom.js

-I made sure my new views exposed filter is numeric field type with "in between" type selected.
-I am using the patched version ZIP file as mentioned in his above comment on June 11, 2012 at 7:19pm
-I am a bit lost on @Nagiek’s words : First, js and css should be added via the drupal_add_library('system','ui.slider') function in the template preprocess area.”
When I try to ad the following drupal_add_library('system','ui.slider') code to my template.php I get an error: Parse error: syntax error, unexpected T_FUNCTION.

Any advise or help on this would be much appreciated!

Regards

FridgeWheeL

noshame’s picture

Hi,

Is it possible to set a non linear (logarithmic or exponential) scale on the slider ?

For example if the slider had a min =0 and max=100 but most of the values you were sampling ranged between 1 and 10, could the slider use 75percent of the range to represent 1-10 and the last 25percent of the display to represent the other 90 units?

muddie’s picture

The "Using the jQuery Slider widget with the "In between" filter" is all working fine in Firefox & IE but not at all in Chrome or Safari.
The entire ui-slider div does not render. The views-widget div does though.
Any suggestions?

## Edit/Update##
I figured out what it was. Gee whiz I'm an idiot for not trying this out earlier.
I was logged in to Drupal as Admin on Safari and Chrome. That was it. I spent 5 hours trying to figure out what was going on and then I gave up and went home. When I got home I opened up the site to show my wife what the issue was that had me back late at work and lo and behold it works!! In Safari and Chrome so I thought WHAT?? I then logged in as admin to check my final settings before I left work and as soon as I logged in the slider disappeared again.
So There must be some conflict that appears when you are logged in but thats fine as this site doesn't have regular users accounts so no one will ever have that problem but me. and the client when they are logged in.

nano_monkey’s picture

THANKYOU. Works a treat :)

swfindlay’s picture

rooby has kindly made a patch for this. So you shouldn't need to do all the other faffing.

Good luck.

iamalwayslost’s picture

I got the jquery ui slider working but it places two text boxes as output.

I have been searching for a few days but couldn't figure out how to change that output to , eg, Price $1-$99

In http://jqueryui.com/slider/#range they use rewrote with "$" inserted.

 slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}

I was sure if I should change the better_exposed_filters.js

   slide: function (event, ui) {
                    $min.val(ui.values[0]);
                    $max.val(ui.values[1]);

to

     slide: function (event, ui) {
                    $min.val('$' + ui.values[0]);
                    $max.val('$' + ui.values[1]);

Should the output changes be made at the better_exposed_filters.js level? if I do change it there, it seems the filters stop working even tho it will display the Price: $1-$99 nicely.

Any ideas? Thanks.

phelix’s picture

Did you ever figure out how to get the display to show dollar signs instead of just numbers??

gpollner’s picture

Hello,

I need to implement the change event so I will be able to update the results taken into account the new date.

But the way I can't find the way to implement that method for the field the datepicker is set.

Any idea? What approach might I use?

Thank in advance.

dafnie’s picture

I have a site with 100 toys. Every toys has a specific age range, let say 5 to 12 years or 6 to 10.
I would like have have a exposed filter were user enter their age an only get the filtered toys displayed.
How can i do this?

dafnie’s picture

I made a themplate-file in view.
Code from views-view-fields--[contettype].tpl.php

<?php if (isset($_GET['<YOUR_FIELD']) && $_GET['YOUR_FIELD'] <= strip_tags($fields['<em>field_YOUR_FIELD</em>']->content)): ?> --added this line--
  
  <?php foreach ($fields as $id => $field): ?>
    <?php if (!empty($field->separator)): ?>
      <?php print $field->separator; ?>
    <?php endif; ?>
    <?php print $field->wrapper_prefix; ?>
      <?php print $field->label_html; ?>
      <?php print $field->content; ?>
    <?php print $field->wrapper_suffix; ?>
  <?php endforeach; ?>

<?php endif; ?> --added this line--