Hi Nigel and team,
I have tried your suggestion for conditionally hiding filters as per the instructions on this support ticket:
https://toolset.com/forums/topic/conditional-display-of-a-filter-fields/
My prototype is based on a grandparent > parent > child relationship for boroughs of New York, neighbourhoods, properties. I tried initially with your code suggestion, edited to match my types and relationships. On initial page load all is good and when I select a borough the neighbourhood filter appears. But, if I return the borough back to its default select value the neighbourhood filter remains visible.
The result can be tested here:
hidden link
I have modified my javascript to the following to see if that will work.
( function( $ ) {
$( document ).ready( function(){
var boroughSelect = document.getElementById("wpv_control_select_wpv-relationship-filter_borough");
var borough = boroughSelect.options[boroughSelect.selectedIndex].text;
// "Select Borough" is the default in the drop down select
$('.neighbourhood-filter').hide();
$('#wpv_control_select_wpv-relationship-filter_borough').change( function(){
if ( borough != "Select Borough" ){
$('.neighbourhood-filter').show();
} else {
$('.neighbourhood-filter').hide();
}
});
});
})( jQuery );
It seems to respond to the initial borough selection but returning back to the default leaves the Neighbourhoods filter visible. From what I can see the .change() function really does nothing. If I remove it and all the contained code the script still works in the manner I describe above. The view is configured to AJAX results update when visitors change any filter values, so maybe this is not compatible.
I am happy for it to work as is but if it can be made to work, that would be good too.
Hi Stephen,
Thank you for contacting us and I'll be happy to assist.
Since your view is set to update search results using AJAX (i.e. without page reloading), you'll need to make your custom script not only work when the page loads, but also when the results are updated through AJAX.
First, you'll wrap your script inside a named function and load it when the page loads, e.g.:
function custom_filter_processing() {
// code for processing
}
jQuery( document ).ready( function( $ ) {
custom_filter_processing();
});
Note: you'll replace "// code for processing" with the actual script to show or hide the filtering fields.
Next, to make this script also execute, when the results have been updated, add the function's name "custom_filter_processing" (without the quotations marks) in the field "will run after updating the results".
You'll see this in the View's "Custom Search Settings", as shown in this example screenshot:
( screenshot: hidden link )
I hope this helps and let me know how it goes.
regards,
Waqar
My issue is resolved now. Thank you!
