Views filters auto submit with Hierarchical Select (Drupal 6)

By Mahmoud Mostafa | Tue, April 19 2011

In Drupal 6, Views Filters can be automatically submitted (without pressing apply button) using a simple JQuery trick like this one (or using Views Hacks module)

$('.views-widget select').change(function() {
  $(".view-filters form").submit();
});

But if you are also using Hierarchical Select module this won't be that easy. If you just need the code to get the idea, here is it :

$('.views-widget .selects select').change( function() {
    $(this.parentNode.parentNode.parentNode).bind('change-hierarchical-select', function() {
    $(".view-filters form").submit();
  })
});

All we needed to do was binding our function to one of the events supplied by the hierarchical select module (the "change-hierarchical-select" event), you can read more about these events in the API.txt file supplied with the module.

Comments

Mahmoud, Thanks for your time

Mon, 07/18/2011 - 23:47 | Anonymous (not verified)

Mahmoud,

Thanks for your time with this! Any ideas on how one could delay the submission of the form until the third and final tier is selected?

For example:

Nissan>>
Titan>>
2000 (auto submits after clicking year)

Would I need to do a lot of custom work to achieve that

Thanks again!

Auto-submit after last select

Thu, 07/21/2011 - 22:48 | Mahmoud Mostafa

There is more than one way to do this :

The first idea is to change the jQuery selector

$('.views-widget .selects select')

to be something like

$('.views-widget .selects #edit-model-hierarchical-select-selects-2')

Of course you need to find out the id of the final tier's select tag. (the above code supposes you are using hierarchical select for a vocabulary called "Model" that has the three tiers as levels)
This should normally work in most cases.
Another idea is to add some condition after the first line (for example : To ensure the values of the first two selects are changed from initial values, or to check if this is the desired select supposing you have a problem with jQuery selectors)
This idea is not recommended unless the previous one was a complete failure (which is not likely to happen)

Thanks!

Mon, 07/18/2011 - 23:40 | Anonymous (not verified)

Mahmoud,

Thanks for your time working this out! Where do I need to paste this? Any other tips to get it working?

Thanks,

Nick

Where to paste

Thu, 07/21/2011 - 19:59 | Mahmoud Mostafa

In Drupal 6, you can paste any theme-related javascript code in a file named script.js in your theme's directory, this usually means /sites/all/themes/yourthemename/script.js

But note that you will need to put this code inside a "behavior" to ensure it gives the desired results, here is a behavior that only does this form submission thing :

Drupal.behaviors.mySpecialBehavior = function(context) {
  $('.views-widget .selects select').change(function() {
    $(this.parentNode.parentNode.parentNode).bind('change-hierarchical-select',function() {
      $(".view-filters form",context).submit();
    });
  });
}

So, you just paste the above code in your script.js file and this get the job done.