I have set up custom JavaScript to conditionally hide, show and set filter options and values based on the option selected in another filter. In the first time landing on the page, everything works as expected, however, when I refresh the page manually the filters fields behave as expected (visually) but the results don't reset.
The code I'm using is below. Is it possible to make it such that both the filters and the results are reset when a user refreshes the page?
You can view the problem by going to hidden link then do the following...
Select an option in the first filter and you'll see more filters appear and the search results change correctly.
However, if you then refresh the page, you'll see the filters reset as expected but the search results don't reset.
( function( $ ) {
$( document ).ready( function(){
// Initially set all filter values to none
$('select[name="wpv-wpcf-voyage-or-excursion"]').val('');
// Initially hide filters
$('.voyage-date-filters').hide();
$('.excursion-date-filters').hide();
$('.sort-order-options').hide();
// Add change listener to other filter
$('select[name="wpv-wpcf-voyage-or-excursion"]').change( function(){
if ( $(this).val() == "2" ) {
$('.voyage-date-filters').show();
$('.excursion-date-filters').hide();
$('.sort-order-options').show();
// Reset Excursion Date Filters
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_min]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-excursion-departure-date-and-time_max]' ).val('');
// Set Sort Order To Voyage Embarkation Date and Disable Embarkation Sort Order Option
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-embarkation-date]").attr("selected", "selected");
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-excursion-departure-date-and-time]").attr("disabled", "disabled");
}
if ( $(this).val() == "1" ) {
$('.excursion-date-filters').show();
$('.voyage-date-filters').hide();
$('.sort-order-options').show();
// Reset Voyage Date Filters
jQuery( 'input[name=wpv-wpcf-voyage-disembarkation-date]' ).val('');
jQuery( 'input[name=wpv-wpcf-voyage-embarkation-date]' ).val('');
// Set Sort Order To Excursion Departure Date and Disable Voyage Embarkation Date Sort Order Option
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-excursion-departure-date-and-time]").attr("selected", "selected");
$("select[name='wpv_sort_orderby']").find("option[value=field-wpcf-voyage-embarkation-date]").attr("disabled", "disabled");
}
});
});
})( jQuery );
Hi,
Is this problem resolved? I checked the URL you mentioned above:
hidden link
But can not find any custom search form, I get this:
Excursion Listings Coming Soon
Please check it, thanks
Oops, I forgot to make it public for you to view!
It should now be visible if you go to the link again, thanks!
Thanks for the details, I can see the problem in your website, as you can see when you have done the fist step:
Select an option in the first filter and you'll see more filters appear and the search results change correctly
The URL of your browser will be changed with some URL parameters, so when you refresh the page, it will display the filtered results.
This is a feature of Views plugin, you can disable it by this:
Edit the view ID (2206), in section "Custom Search Settings", enable option "Let me choose individual settings manually", enable option "Do not adjust URLs after loading search results", and test again.
Thanks Luo, I had thought this might be the reason but I didn't know where to change the setting - it looks to be working ok now.