We create a search function atop a page here: hidden link
Everything is working well however, for the life of me, I cannot figure out why when I click the "start new search" reset, I cannot get the results to hide without refreshing the entire page. I attached my approaches below, any help is appreciated.
I have tried a basic script like this:
jQuery(document).ready(function($) {
// 1. Initially hide the search results (div)
$("#cruise-search-results").hide();
// 2. Show results when "View Cruises" is clicked
$(".cruise-search").click(function() {
$("#cruise-search-results").show();
});
// 3. Hide results and reset fields when "Reset" is clicked
$(".cruise-reset").click(function() {
// Reset all select elements within the filter
$(".search-container select").each(function() {
$(this).prop('selectedIndex', 0); // Select the first option
});
// Hide the results immediately
$("#cruise-search-results").hide();
// Trigger Toolset filter refresh
if (typeof wpv_filter_submit === 'function') {
wpv_filter_submit();
}
});
// Use Toolset's 'wpv_parametric_search_results_updated' event with a slight delay
$(document).on('js_event_wpv_parametric_search_results_updated', function(event, data) {
// Check if it's the correct View (replace 54768 with your actual View ID)
if (data.view_id == 54768) {
// Introduce a very short delay before hiding the results
setTimeout(function() {
$("#cruise-search-results").hide();
}, 10); // 10 milliseconds (adjust as needed)
}
});
});
and then looking for a mutation to no avail:
jQuery(document).ready(function($) {
// 1. Initially hide the search results (div)
$("#cruise-search-results").hide();
// 2. Show results when "View Cruises" is clicked
$(".cruise-search").click(function() {
$("#cruise-search-results").show();
});
// 3. Hide results and reset fields when "Reset" is clicked
$(".cruise-reset").click(function() {
// Reset all select elements within the filter
$(".search-container select").each(function() {
$(this).prop('selectedIndex', 0); // Select the first option
});
// Hide the results immediately
$("#cruise-search-results").hide();
// Trigger Toolset filter refresh
if (typeof wpv_filter_submit === 'function') {
wpv_filter_submit();
}
});
// *** Mutation Observer to monitor and hide results ***
// Select the node that will be observed for mutations
const targetNode = document.getElementById('cruise-search-results');
// Options for the observer (which mutations to observe)
const config = { childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
// Hide any newly added child nodes
$(targetNode).children().hide();
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
});
