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

Uralian

I would try with jQuery Migrate just to see up to the point it works and then I would probably go back to jQuery logs and see what was changed regarding ajax calls, you might be missing something... same for jQuery UI (here must be very quick as you had 1.10.0 and now only got 3 versions up). – Subarctic

Hi, we tried with jQuery Migrate but there is not relevant notices. I will check with jQuery Logs – Uralian

Plz post your Ajax code in your question – Hulking

@DaveA Updated question with the ajax code. Pls have a look a it. Thanks – Uralian

I'd wrap your code in a try/catch and dump the error to the console (via console.log()); that would at least tell you if there's an actual error occurring. – Trophoblast

Hi, I tried that as well. The problem is that after Ajax the code doesn't called / executes at all. – Uralian

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

Hulking

I have tried this and this works. Now the function executes however, the value in min and max variable which is passed to slider() is not updated after ajax call. It takes the original price and thus breaking the functionality. Can you give us a clue on how to fix this? – Uralian

@Krunal, then we should re-write the function to take min and max as arguments -- I'm just not sure where that data should come from... result? – Hulking

@Uralian Consider passing back an object: { htmlresult: html, minresult: minval, maxresult: maxval}. Then you can reference them as result.html, result.minresult, result.maxresult – Hulking

I have tried with passing value like you suggested however it still doesn't updates the variable declared, not sure why! any idea what could be wrong? – Uralian

I have tried with your suggested solution, I tried with printing the value into alert on both Ajax function and before calling slider. However, the value seems to be updated in result html after ajax but in variable passed to slider and alert it is still older value. I am not sure why it is still passing older value after ajax! – Uralian

@Krunal, please add an update to your code uncluding the new json return object and your new implementation of the ajax call. I'm sure we can work this thru. – Hulking

Hi, thanks for your response. :) What we return in Ajax is an html, and not json so I'm not sure how to do that. Moreover, the resulting html result has this slider code into it which doesn't seems to be evaluated properly. Even a simple alert does not work. – Uralian

@Krunal, you can convert your html to json, and that way create a javascript object with multiple fields. Or, another way, you can create hidden inputs nested in your html and use jquery selectors in initSlider. That may be better than sourcing razor variables since your razor variables won't refresh with ajax calls. Or (and I hesitate on this suggestion), you can make a 2nd Ajax rquest just to get those values. – Hulking

I didn't get it to work. I'm now trying with using KendoUI slider to see if it works. – Uralian

Surprisingly KendoUI Slider works without any such issue. I'm now integrating it properly. Thank you for your help. – Uralian

Thank you for your help so far. It helped us try several ways and understand how it works, however finally it doesn't work and we moved to use KendoUI Slider which works fine without this issue. Now implementing this. However, I still believe that your answer does helped a lot and would like to accept it as an answer. – Uralian