jQuery Range Slider not working after Ajax call after updating jQuery to 1.10.2

Question

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 via Ajax and everything seems to work fine upto now. However, after upgrading to the jQuery version 1.10.2 and jQuery UI 1.10.3, the same slider works on first load, but fails to load after Ajax requests. The following code is on the page where filter is being impelemented.

The same code is working fine with jQuery 1.7.1 and jQuery UI 1.10.0.

It appears that the slider is not initialized after content is loaded via Ajax, but not sure why! What could be wrong here?

$("#slider-range").slider({
    range: true,
    min: minValue,
    max: maxValue,
    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));
}

Ajax function

$.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");
    }
});

Answer 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:

function initSlider(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)
    }
});