[Resolved] URL Parameter reset based on filter selection?

[Author]

Posts

[Ronald]

I have created a custom Parametric Search with conditional filters based on the selection of another filter using Javascript.

Main Resource Groups - Taxonomy filter that has 11 options
Then there are 11 different sub taxonomies that show/hide based on the Main Resource Group selector's value

Can be viewed here
hidden link

The issue:

It mostly works as intended. You select a Main Resource Group, then a subcategory, and Submit, the results come back as expected.

For example, if I select "Accounting" in the Main Resource Group, then select "Expensify" in its Subcategory, we get the following url that contains a single result.

hidden link

But then if I do another search from that results page, it remembers the accounting subcategory selected earlier and breaks when you submit again.

For example, if i then select "Kids" in the Main Resource Group and then hit submit, the &wpv-resource-group=kid changes properly from accounting, but then &wpv-accounting=expensify is still present from the previous search.

hidden link

Is there no way (through Javascript perhaps) to auto reset the url parameters of a filter if the filter is no longer visible on the page?

I know I could have a warning somewhere in the search section stating to click the reset button after each search, but it would be great if there is a way to have this happen automatically.

[Ronald]

This error also occurs when you click on "Accounting" in the Main Resource Group selector, then select "Expensify" in the Accounting Subcategories selector, then switch the Main Resource Group Selector to another option, then hit Submit. It does the same thing as listed above.

[Waqar]

Hi Ronald,

Thank you for contacting us and I'll be happy to assist.

You can show/hide the corresponding filter fields and set the default value of sub-categories when the parent selector is changed, all through custom JavaScript code.

For example, you can replace your custom script with a function like:

( function( $ ) {

        // Your code here
        $(document).ready(function(){

            $("select.resource-group").change(function() {
                // run on select value change
                processFunction();
            }).trigger('change');

            // run on page reload
            processFunction();

        });

        // actual function to do the processing
        function processFunction() {

            // hide all the fields first
            $(".resource-cat").hide();

            var resCat = $("select.resource-group").val();

            if (resCat == '0') {
                // hide all but default fields
                $(".resource-cat").not(".default").hide();
                $(".default").show();
                // set default value for all sub-cat fields
                $(".resource-cat").not(".default").find('select').val('0');
            } else if(typeof(resCat) != "undefined" && resCat !== null) {
                // show the correct sub-cat field
                $(".resource-cat").not("."+resCat).hide();
                $("."+resCat).show();
                // set default value for all other sub-cat fields
                $(".resource-cat").not("."+resCat).find('select').val('0');
            }
        }

})( jQuery );

I hope this helps and you can further adjust this code as needed.

regards,
Waqar

[Ronald]

Thank you Waqar, while your code is much cleaner than mine is, I believe I have the show/hide javascript working just fine.

My issue is not with the showing/hiding, but with the url parameters that get "left behind" if you make a selection on one of them, then hide that one and show another to make a selection.

For example lets say you have one main category (cat1) and 2 subcategories (catA, catB) that show/hide through javascript based on your selection in cat1, the following happens by default in the url parameters

Starting URL before you make any filter selections

yoursite.com/search/?cat1=0&catA=0&catB=0

1- Make a selection on cat1

yoursite.com/search/?cat1=selection1&catA=0&catB=0

2- You then make a subcategory selection on catA

yoursite.com/search/?cat1=selection1&catA=anotherSelection&catB=0

3- then you decided you really wanted catB so you select that on the main category (cat1)

yoursite.com/search/?cat1=selection2&catA=anotherSelection&catB=0

As you can see, the subcategory parameter you selected in catA doesn't go away since all you did was hide the div.

4- then you make a subcategory selection on catB

yoursite.com/search/?cat1=selection2&catA=anotherSelection&catB=yourIntendedSelection

Now you are trying to search with two categories that the content wont share because the catA parameter never cleared when you switched main categories. This is the issue I am having. This also is the same issue if someone made a successful first search, then immediately goes into another search, it remembers the parameters set from the first search so any hidden filters that were used in the previous search still affect the next search.

This is the behavior I am hoping to fix. Is it possible?

[Ronald]

Update: I tried your code and it actually fixes the issue! I didnt read through your code fully and didnt notice the setting of defaults you incorporated. I saw the basic structure and thought you were just giving me a basic show/hide implementation.

Lesson learned, read everything fully before commenting!!!

Thank you so much Waqar

[Ronald]

My issue is resolved now. Thank you!