[Resolved] Execute a Filter View with JS

[Author]

Posts

[MarcoS3712]

Hello,
I've set a Custom JS code in a View in order to pre-select a filter taxonomy value.
You can see the view here: hidden link
Please, click in FILTER SEARCH to view the filter.

For "Post Tipology" I would like to see posts with "SOLUTION" when page is loading.
And seem to works, but how may I execute the filter when page is loading (in order to see only Objectives by Role tab post)?

This is the code I've set:

jQuery(document).ready(function() {
jQuery("select[name^='wpv-tipologia-articolo'] option[value='solution']").attr("selected","selected");
});

Thanks in advance, Marco

[Luo Yang]

Hello,

I assume you are using AJAX search feature, if it is, you can trigger your custom JS codes with event "js_event_wpv_parametric_search_results_updated", for example:

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
	*/
	// here setup your custom JS codes
});

[MarcoS3712]

Many thanks Luo Yang for your reply.
In the Custom Search View I use Full page refresh when clicking Submit, and I've added JS code in order to pre-select a taxonomy value.
Then, I would like to auto-submit the filter via JS code.

Sorry, but I'm not so confident with JS; I tried with this code solutions, but doesn't works:

SOLUTION 1 (View ID = 4997)
jQuery(document).ready(function() {
jQuery("select[name^='wpv-tipologia-articolo'] option[value='solution']").attr("selected","selected");
});
jQuery(document).ready(function($){
$('form.wpv-filter-4997 select').change(function() {
$('form.wpv-filter-4997').submit();
});
});

SOLUTION 2
jQuery(document).ready(function() {
jQuery("select[name^='wpv-tipologia-articolo'] option[value='solution']").attr("selected","selected");
jQuery('wpv-tipologia-articolo').on('change', function(event) {
jQuery('[name="wpv_filter_submit"]').trigger('click');
});
});

SOLUTION 3
Where Wpv-filter-4997 data-viewhash = 2b14b35850d895e6a2522bd4f0cfe3d6

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
data.view_unique_id ("2b14b35850d895e6a2522bd4f0cfe3d6")
jQuery(document).ready(function() {
jQuery("select[name^='wpv-tipologia-articolo'] option[value='solution']").attr("selected","selected");
});
});

SOLUTION 4
Where wpv-view-output data-toolset-views-view-editor = eyJuYW1lIjoiY29ub3NjZW56ZWVjb25vbWlhIn0=

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
data.view_unique_id ("eyJuYW1lIjoiY29ub3NjZW56ZWVjb25vbWlhIn0=")
jQuery(document).ready(function() {
jQuery("select[name^='wpv-tipologia-articolo'] option[value='solution']").attr("selected","selected");
});
});

[Luo Yang]

Since it is a custom JS codes problem, please provide a test site with the same problem, fill below private message box with login details, also point out the problem page URL and view URL, I need test and debug it in a live website.

[Luo Yang]

I assume you are going to display only "Solution" post by default.

It does not needs custom JS codes, you can try "wpv_filter_query", like this:
Dashboard-> Toolset-> Settings-> Custom code:
hidden link

Add one item, with below codes:

add_filter('wpv_filter_query', function($query, $settings, $view_id){
    if( in_array( $view_id, array(4997) ) && !isset( $_GET['wpv-tipologia-articolo']) ){
      $_GET['wpv-tipologia-articolo'] = 'solution';
    }
  	return $query;
}, 9, 3);

More help:
https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query

[MarcoS3712]

My issue is resolved now. Thank you!