Skip to content
Showing 829–837 of 1,474 results
(function($) {
$(document).ready(function() {
// 1. Identify your search form or individual filter elements
const searchForm = $('#rtcl-search-form'); // Replace with your actual search form ID
const locationSelect = $('#rtcl-location-field'); // Replace with your actual location select ID
const categorySelect = $('.rtcl-category-dropdown'); // Replace with your actual category select class
// ... and any other relevant filter inputs, e.g., subcategory
const subcategorySelect = $('.rtcl-subcategory-dropdown'); // Example for subcategory
// Function to trigger the loading state
function startLoadingState() {
document.body.classList.add('searching');
// You might also want to disable the search button or inputs here
searchForm.find('button[type="submit"]').prop('disabled', true);
locationSelect.prop('disabled', true);
categorySelect.prop('disabled', true);
subcategorySelect.prop('disabled', true); // Disable subcategory too
}
// Function to end the loading state
function endLoadingState() {
document.body.classList.remove('searching');
// Re-enable the search button or inputs here
searchForm.find('button[type="submit"]').prop('disabled', false);
locationSelect.prop('disabled', false);
categorySelect.prop('disabled', false);
subcategorySelect.prop('disabled', false); // Re-enable subcategory
}
// --- Scenario A: Form Submission (e.g., a "Search" button) ---
if (searchForm.length) {
searchForm.on('submit', function(event) {
// If your search is handled by AJAX, you'll need to prevent the default form submission
// event.preventDefault();
startLoadingState();
// If you're using AJAX for search, your AJAX call would go here.
// Example (using jQuery's AJAX):
// $.ajax({
// url: ajaxurl, // WordPress AJAX URL
// data: $(this).serialize(),
// method: 'GET',
// success: function(response) {
// // Update your search results area with 'response'
// },
// error: function() {
// console.error('Search failed');
// },
// complete: function() {
// endLoadingState(); // Remove the class when AJAX is complete
// }
// });
// If it's a full page reload, the class will be removed automatically
// when the new page loads.
});
}
// --- Scenario B: Instant Search on Filter Change (e.g., dropdowns) ---
// If selecting a location/category immediately triggers a search:
if (locationSelect.length) {
locationSelect.on('change', function() {
startLoadingState();
// Trigger your search logic here (e.g., programmatically submit the form or make an AJAX call)
// Example: searchForm.submit(); // If it's a full page reload
// If AJAX, ensure endLoadingState() is called in its complete callback.
});
}
if (categorySelect.length) {
categorySelect.on('change', function() {
startLoadingState();
// Trigger your search logic here
});
}
if (subcategorySelect.length) {
subcategorySelect.on('change', function() {
startLoadingState();
// Trigger your search logic here
});
}
// --- Important for full page reloads with dynamic content ---
// If your search results page loads, and then content loads dynamically
// (e.g., via another AJAX call after the initial page load),
// you might need to add the 'searching' class on the new page's load
// and remove it once the dynamic content is fully rendered.
// This part is highly dependent on how your theme/plugin loads content.
});
})(jQuery);
