Skip Navigation

[Resolved] View select all in filter and live search

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

Problem:

I have multiple blocks with taxonomy filters in a view by checkboxes. I want to offer a 'select all' option per block.

Solution:

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

https://toolset.com/forums/topic/view-select-all-in-filter-and-live-search/#post-1302767

Relevant Documentation:

This support ticket is created 2 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

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 5 replies, has 2 voices.

Last updated by bartv-9 2 years, 11 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#1302611

Tell us what you are trying to do?
I have multiple blocks with taxonomy filters in a view by checkboxes. I want to offer a 'select all' option per block. I have tried this solution which works: https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

It selects all taxonomies per block of a taxonomy, but it doesn't trigger the live filter where the results are directly loaded.

So basically I miss the last step.

Is there any documentation that you are following?
https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

Is there a similar example that we can see?
https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

#1302659

Luo Yang
Supporter

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

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

Hello,

As the thread you mentioned above, there isn't such a built-in feature within Toolset Views plugin, it needs 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, I can try to setup a demo for you.

#1302711

Luo Yang
Supporter

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

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

Frontend-events.JPG

I have done below modifications in your website:
Edit the post view "Overview products":
hidden link
in section "Search and Pagination", change the HTML codes from:

<input type="checkbox" id="selecctall_neighborhood" />Select All</span>
<div id="check_neighborhood">

To:

<input type="checkbox" id="selecctall_neighborhood" class="js-wpv-filter-trigger" />Select All</span>
<div id="check_neighborhood">

A generic jQuery 'change' event thrown on any other filter element with the CSS class "js-wpv-filter-trigger".

Please test again, check if it is fixed.

And since you are using AJAX search form, you can trigger the same JS codes after AJAX results are loaded with event "js_event_wpv_parametric_search_results_updated", for example, in section "Search and Pagination", click "JS editor", click button "Frontend events", see screenshot: Frontend-events.JPG

#1302757

Wow, that works great!!

The only thing is that when I click 'select all' for the 2nd time it doesn't deselect the checkboxes below.

This function stopped working:
this.checked = false; //deselect all checkboxes with class "checkbox_neighborhood"

#1302767

Luo Yang
Supporter

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

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

The problem is that you are using static HTML codes to setup the "All plants" checkbox, it will be display as unchecked status always, I have done below modifications in your website:
1) in section "Search and Pagination", change the "All plants" checkbox HTML codes to:

<input type="checkbox" id="selecctall_neighborhood" name="selecctall_neighborhood" value="selecctall_neighborhood" class="js-wpv-filter-trigger" [wpv-conditional if=" ('[wpv-search-term param="selecctall_neighborhood"]' eq 'selecctall_neighborhood') "]checked="checked"[/wpv-conditional] />

It will pass URL parameter "selecctall_neighborhood", when the URL parameter value is "selecctall_neighborhood", then check the checkbox.

2) As I mentioned above, you can trigger the JS codes with event "js_event_wpv_parametric_search_results_updated", I have added below JS codes:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	$('#selecctall_neighborhood').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('#check_neighborhood .js-wpv-filter-trigger').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox_neighborhood"               
            });
        }else{
            $('#check_neighborhood .js-wpv-filter-trigger').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox_neighborhood"                       
            });         
        }
    });
});

So when you click it 2nd time it will be able to deselect the checkboxes, it is just a demo for your reference.

#1302779

My issue is resolved now. Thank you so much! Very fast and adequate solution!!