Isotope JS Price Filters stops working when doing another AJAX call

16 views Asked by At

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();

}

0

There are 0 answers