Jquery Range Slider Not Working After Ajax Call After Updating Jquery To 1.10.2

I am working on a asp.net C# MVC web application and offers a jquery UI price range filter to filter the products based on selected price range. The resulted products are loaded vi

Solution 1:

I think you need to initialize your slider AFTER it is rendered. None of the DOM elements you create after your initial render will be intialized or bound by javascript you have already run.

So, 1st Encapsulate your initialization in a function:

functioninitSlider(passedMin, passedMax)
{
$("#slider-range").slider({
    range: true,
    min: passedMin,
    max: passedMax,
    values: [selectedMinValue, selectedMaxValue],
    values: [selectedMinValue, selectedMaxValue],
    slide: function (event, ui) {
        //Note: Currency Custom formatting is not supported.
        $(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[0]);
        $(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + ui.values[1]);


    },
    change: function (event, ui) {

        var url = removeParameter('@(currentURL)', "price");
        var newUrl = url.replace(/&amp/g, '');
        if (isAjaxRequest) {
            callAjax(UpdateQueryString("price", ui.values[0] + "-" + ui.values[1], newUrl));
        }
    }
});
isAjaxRequest = true;
$(".currentMinPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 0));
$(".currentMaxPrice").html('@(Model.PriceRangeFilterContext.CurrencySymbol) ' + $("#slider-range").slider("values", 1));
}

} 

Then in your AJAX, call your init function on success

$.ajax(
{
    url: url,
    type: 'POST',
    success: function (result) 
    {   
        // Result is in html
        $('#catalog').replaceWith(result);
        $('#ajax-loading').hide();
        DisplayFilter();

        //Lazy Loading
        $("img.lazy").show().lazyload(
        {
            effect: "fadeIn"
        });
        $(window).trigger("scroll");

        initSlider(newMin, newMax)
    }
});