I have built this function that comes with a price range slider filter using Isotope JS. Basically the function is loaded after an AJAX call and it works for the first time. But if I try to do another different AJAX call request and then calling the function the price range slider stops working for unknown reason.
function itinerarySearchFilter() {
var $grid = jQuery('.isotope-filter-container').isotope();
$grid.isotope('destroy');
var $grid = jQuery('.isotope-filter-container').isotope();
$grid.isotope( 'reloadItems');
var $priceSlider = jQuery('.price-range').slider();
$priceSlider.slider("destroy");
// Initialize Isotope
var $grid = jQuery('.isotope-filter-container').isotope({
itemSelector: '.isotope-item',
transitionDuration: '0',
hiddenStyle: {
opacity: 0
},
visibleStyle: {
opacity: 1
},
});
// Price range slider configuration
jQuery(".price-range").slider({
range: true,
min: 1,
max: 2500,
values: [1, 2500],
slide: function (event, ui) {
jQuery(".price-range-slider").find("label").html("From AUD" + ui.values[0] + " to AUD" + ui.values[1]);
updateFilters();
}
});
// Category checkboxes change event
jQuery(".filter-checkbox").change(function () {
updateFilters();
});
// Function to update Isotope filters based on price range and categories
function updateFilters() {
var priceRange = jQuery(".price-range").slider("values");
var categories = [];
jQuery(".filter-checkbox:checked").each(function () {
categories.push(jQuery(this).data('category'));
});
// Filter items based on price range and categories
$grid.isotope({
filter: function () {
var price = jQuery(this).data('price');
var itemCategories = jQuery(this).data('category').split(' ');
// Check if the item's price is within the selected range
var priceFilter = price >= priceRange[0] && price <= priceRange[1];
// Check if the item belongs to any of the selected categories
var categoryFilter = categories.length === 0;
for (var i = 0; i < categories.length; i++) {
if (itemCategories.indexOf(categories[i]) !== -1) {
categoryFilter = true;
break;
}
}
console.log(priceFilter);
// Return true if the item satisfies both price and category filters
return priceFilter && categoryFilter;
}
});
}
// Initial filter based on default slider values and checkboxes
// Uncheck all checkboxes
// jQuery(".filter-checkbox").prop("checked", false);
// // Reset price range slider values
// jQuery(".price-range").slider("values", [1, 2500]);
// // Update filters after resetting
// updateFilters();
}