Skip Navigation

[Resolved] Views Filters select Parent Categories

This thread is resolved. Here is a description of the problem and solution.

Problem:

I would like to filter using Views filters, so that searching for any child term also includes in the search its parent terms.

Solution:

There isn't such a built-in feature within Toolset plugins, and it needs custom JS codes, for example:

https://toolset.com/forums/topic/views-filters-select-parent-categories/#post-1287019

Relevant Documentation:

https://api.jquery.com/prev/

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 6 replies, has 2 voices.

Last updated by rubenB 1 year, 9 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1287013

Hi I have a taxonomy I would like to filter using Views filters, so that searching for any child term also includes in the search its parent terms.

For example my Taxonomy 'Minimum Age' has the structure
50+ > 55+ > 60+ > 65+
So if a user indicates they are 60+, the search should include 55+ and 50+, etc.

I'm trying to work out a jQuery solution, based on
https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/
But modifying that solution that each checkbox should only select the previous sibling checkbox.
Replacing the .each() method with .prev() is proving too complicated for me!
Something like this?


$(document).ready(function() {
    $('.select_previous .js-wpv-filter-trigger').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $(.prev('.select_previous  .js-wpv-filter-trigger')).each(function() { //trying to find the previous checkbox
                this.checked = true;  //and check it              
            });
        }     
        }
});

Sorry no good with Javascript!

Or should this be achieved with a different approach all together?

#1287019

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Hello,

As you can see there isn't such a built-in feature within Toolset plugins, and it needs custom JS codes.

You are right, in your case, it needs to use .prev() selector, see jQuery document:
hidden link

I suggest you follow above document to setup your custom JS codes.

If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and view URL, thanks

#1287215

Thanks for your quick reply !

I'll read into the jQuery documentation and see what I can figure out myself!

Otherwise I'll have a live site online in a week or two, and might bug you again if thats ok?

#1287257

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

OK, please update here when your test site is ready. thanks

#1292287

Wow I actually figured it out, kinda! Thanks for prodding me in the right direction and pointing me to the good documentation 🙂
These search filters are too confusing due to the nature of the content, and I'm not sure if this is actually even what I need to do... but I'm so glad I've got Toolset to help me do it!


jQuery(document).ready(function() {

// Check the Previous Checkboxes when they are wrapped in the .select_previous div eg for Minimum Age taxonomy
// Wrap the formgroup in .select previous div to apply this script
jQuery('.select_previous .js-wpv-filter-trigger').click(function() {
    if(this.checked) { // check select status

        jQuery(this).parent().parent().prev(".checkbox").children().children().trigger("click");
        //walking back up the tree to the previous checkbox
        //using trigger('click') instead of 'prop('checked' true)' as this method fires a new event so it can tick all the boxes
      };
    });

    // Add checked class to checkboxes label div, as the input is nested inside the label, can't target it with :checked
    jQuery('.js-wpv-filter-trigger').click(function() {
      if(this.checked) { // check select status
          jQuery(this).parent().addClass('checked');
          }
      else  { // check select status
          jQuery(this).parent().removeClass('checked');
          }
        })
        jQuery().trigger('click');

});
#1292313

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

Is this issue resolved?
Since it is a custom JS codes problem, if you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and view URL, I need to test it in a live website, thanks

#1293221

This issue is resolved now. Thank you!