1

I'm new to Drupal and I'm trying to create a view with many filter options. Because it has a lot of filter fields I want them to be hidden and only show the filter fields the user decides he wants to see at a given time. (all fields should be exposed but only seen when wanted otherwise half the screen is the exposed filters)

I couldn't find a module to get the said affect so I tried to use panels and add my own html and jQuery custom code as a panel above the view:

html:

<input type="button" id="filter-selection-toggle-button" value="show filters"/>
<div id="my-filter-selection">
    <input type="checkbox"  value="edit-field-1">field 1</input><br/>
    <input type="checkbox"  value="edit-field-2">field 2</input><br/>
    <input type="checkbox"  value="edit-field-3">field 3</input><br/>
    <input type="checkbox"  value="edit-field-4">field 4</input><br/>
    <input type="checkbox"  value="edit-field-5">Dimention</input><br/>
    <input type="button" id="filter-button" value="filters button"/>
</div>

jQuery:

<script type="text/javascript">


        // We define a function that takes one parameter named $.
        (function ($) {
            $(document).ready(function()
            {
                var showCheckedFilters=function(event)
                {
                    var x=$("input:checkbox:checked");
                    var y=$("input:checkbox:not(:checked)");
                    var checkedFilters="";//array of checked filters
                    var unCheckedFilters="";//array of checked filters
                    var toggleSpeed=event.data.toggleSpeed;


                    for (var i=0;i<x.length;i++)
                    {
                        checkedFilters=checkedFilters+"#"+$(x).eq(i).val()+","; 
                    }

                    for (var i=0;i<y.length;i++)
                    {
                        unCheckedFilters=unCheckedFilters+"#"+$(y).eq(i).val()+","; 
                    }


                    if (checkedFilters!="") 
                        {

                            //remove comma
                            checkedFilters=checkedFilters.substring(0,checkedFilters.length-1);
                            $(checkedFilters+",.view-filters").show(toggleSpeed);
                        }
                    else//all are unchecked
                        {
                            $(".view-filters").hide(toggleSpeed);
                        }
                    if (unCheckedFilters!="") 
                        {
                            //remove comma
                            unCheckedFilters=unCheckedFilters.substring(0,unCheckedFilters.length-1);
                            $(unCheckedFilters).hide(toggleSpeed);
                        }
                };
            // Now use jQuery with the $ shortcut again like you normally would

            $("#my-filter-selection,.view-filters").hide();
            //showCheckedFilters();//hide nondefault filters
            $("#filter-selection-toggle-button").click(function(){$("#my-filter-selection").toggle(500);});
            $("#filter-button").click({toggleSpeed:500},showCheckedFilters);
            //$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

           //to do on every reload of the filters
           $(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);
        });
        // Here we immediately call the function with jQuery as the parameter.
        }(jQuery));
    </script>

All seems to work fine up until the Drupal filter is actually used, apparently Drupal reloads the filter fields using ajax and not only the content, at which point all the filters appear again.

In order to avoid this I tried capturing the ajax call using

$(document).ajaxComplete({toggleSpeed:0},showCheckedFilters);

or adding my own call to the Drupal submit button:

$("#edit-submit-items-in-market").click({toggleSpeed:0},showCheckedFilters);

both to no avail.

Questions

  1. Is there a way to make sure the unchecked filters stay hidden?

  2. Is there a better solution than adding the above html piece all together?

(note I'm not versed in the Drupal API so sending me to change tpl files or creating a custom module is not a very good option).

example: showing only 2 filter fields- enter image description here

showing all fields (after pressing apply)- enter image description here

  • Not the answer to your question, but maybe you could try Views Dynamic Fields. It promises to do what you wanted in the first place. Might by a way into configuration hell though .. – berliner Feb 24 '15 at 0:13
  • Why dont you just wrap each filter in an accordion with default closed? Then you could just expand the one(s) you need. – Craig Bertrand Feb 24 '15 at 0:55
  • @berliner i looked at that moudle before but from what i figured it supposed to define which fields to show in the table? i want to show all of the fields but to allow the user to show different filters based on his current need. unless im missing something? – Gabriel H Feb 24 '15 at 8:29
  • @CraigBertrand sounds interesting how can i wrap them? is there an option in the views module? – Gabriel H Feb 24 '15 at 8:30
  • @GabrielH Sorry, I wanted to point you to Views Dependent Filters not the other. – berliner Feb 24 '15 at 10:06

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.