Hello,
We have a page with 2 different Views that each one has a date filter, is there a way via javascript or another way that if the user sets the first date filter the second one gets set as well?
thanks
Hello and thank you for contacting the Toolset support.
Can you share a URL where we can see this? Do you want both views to search with same value when the search is performed in one of them?
I wonder if you must keep both filters on the page, or keeping just one would be enough?
Would you allow me temporary access to your website to check this further? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Well, keeping one date filter on the page may be easier than synchronizing multiple date filters. The trick is to have the date filter on one view, and have query filters based on the same URL parameters on the other views.
When you create a date filter, it will automatically create a query filter, however, the query filter will not be readable to know the actual conditions used on it. Check this screenshot hidden link
I can't tell what conditions do you use, I assume you want the posts with a date between the date filters, right?
So, I'll let you remove the date filters on the other views, and create their corresponding query filters based on the same URL parameters:
- wpv-wpcf-tax-sale-publication-date_min
- wpv-wpcf-tax-sale-publication-date_max
Does it make sense?
Hi Jamal,
Can you please help us? Not sure how to do it. I tried to remove it and it did not let me.
The conditions are to get posts between the 2 publications date. Custom field: wpcf-tax-sale-publication-date
The 2 Views with Date Filter are:
1. Search - Newsletter
2. Search - Newsletter - Members Only.
so basically if I search on number 1, the number 2 view will get updated.
thanks
Because both views are using AJAX, my previous suggestion is not relevant anymore. For this case, we'll need Javascript code. I made an example to explain the idea.
The idea is to put Javscript code on the second view and make it react to the changes on the first view. The code will:
- Hide the view's search form.
- Synchronize the date filters values.
- Trigger a form submit when the first view's form is submitted.
This is an example code:
function handleDatePickersSync57241 ($){
// hide the views filters
$('.js-wpv-filter-form-57241').hide();
// sync datepickers
// min date
$('.js-wpv-filter-form-57231 .js-wpv-date-param-wpv-wpcf-tax-sale-publication-date_min-value').on('change', function(){
$('.js-wpv-filter-form-57241 .js-wpv-date-param-wpv-wpcf-tax-sale-publication-date_min-value').val($(this).val()).trigger('change')
})
// max date
$('.js-wpv-filter-form-57231 .js-wpv-date-param-wpv-wpcf-tax-sale-publication-date_max-value').on('change', function(){
$('.js-wpv-filter-form-57241 .js-wpv-date-param-wpv-wpcf-tax-sale-publication-date_max-value').val($(this).val()).trigger('change')
})
// mirror submit form
$('.js-wpv-filter-form-57231 .js-wpv-submit-trigger').on('click', function(){
setTimeout(function(){ $('.js-wpv-filter-form-57241 .js-wpv-submit-trigger').click(); }, 200);
})
}
jQuery(handleDatePickersSync57241);
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
*/
handleDatePickersSync57241(jQuery);
});
The second view's ID is 57241, If you want to add a 3rd view, copy the following code into it and replace all the IDs on it.
My issue is resolved now. Thank you!
