[Resolved] Display a View Filter Selection Visually

[Author]

Posts

[JoelK2744]

Hello,

I am building a view with a search filter, I would like to be able to be able to visually display which filter choices have been made so the user can easily see their selection (in addition to the filter checkboxes/dropdowns). For example, the user chooses "taxonomy 1" in the filter and clicks submit initiating Ajax refresh, once refreshed the term "taxonomy 1" is displayed somewhere on the page so the user can easily see which filter/s have been selected. This would also be helpful when linking directly to a filtered view (i.e. the user hasn't selected the filter themselves, they are following a link that takes them to the filtered view).

Hope that makes sense!

Thanks

[Jamal]

Hello and thank you for contacting the Toolset support.

There is currently no way to get the filters used for search or to build links for them to get the filtered view directly. But you can come up with some custom Javascript code to build them, either by checking the filters or by checking the URL parameters, depending on how you configured the view.

You need to hook your code to the various view's events(Javascript events, pagination, search completed). Check this article https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

Does it make sense? Let me know if you have any questions.

[JoelK2744]

Thanks Jamal, I'll have a play with this and see what I can come up with. If I'm using blocks to build the view where would I place the JS, in the general custom JS area or do I need to use custom search trigger events?

Thanks

[Jamal]

The view block has a custom JS section, add the code inside of it. Check this screenshot hidden link

The code needs to use the view's events. These are the events for pagination and custom search:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.effect (string) The View AJAX pagination effect
	* data.speed (integer) The View AJAX pagination speed in miliseconds
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	
});
jQuery( document ).on( 'js_event_wpv_parametric_search_triggered', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.form (object) The jQuery object for the View form
	* data.update_form (bool) Whether the custom search form will be updated
	* data.update_results (bool) Whether the custom search results will be updated
	*/
	
});
jQuery( document ).on( 'js_event_wpv_parametric_search_started', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	*/
	
});
jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.view_changed_form (object) The jQuery object for the View form after being updated
	* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
	* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
	*/
	
});
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
	*/
	
});

Note that all Toolset blocks have a and Advanced settings section, where you can put a CSS ID or class(see first screenshot), so you could target those elements with jQuery. You can use a container block to hold the generated filter links. Check this screenshot hidden link

[JoelK2744]

Thanks Jamal, the 'custom search results have been updated' option of the custom search events seems to be the one I need.

Is there any way of automatically scrolling down to where the View Output starts when either the 'Custom Search Submit' or 'Custom Search Reset' buttons are clicked?

Thanks

New threads created by Jamal and linked to this one are listed below:

https://toolset.com/forums/topic/scroll-down-to-views-results/

[Jamal]

There should be a way to do it. However, for support rules, we are able to handle only one issue at a time. This helps us to bring you a better service and also helps other users to find all the information here exposed. For that reason, I have created another ticket to help you with this. I'll be posting my reply there.

[JoelK2744]

My issue is resolved now. Thank you!