Question

I have the next piece of code:

    $("#slider-cpu").slider({
        range: "min",
        value: 0,
        min: 0,
        max: cpu.length - 1,
        slide: function(event, ui) {
            $("#cpu").html(cpu[ui.value]);
        },
        change: refreshPrice
    });

And 3 like that called slide-cpu, slide-ram and slide-hdd. That 3 sliders calls to refreshPrice() function and it work well, when it’s changed the function is executed.

The problem is that I have a button to preset various values, exactly this:

    $(".preset").click(function(){
        var values = $(this).attr('data-item'),
            cpu = values[0],
            ram = values[2],
            hdd = values[4];

        $("#slider-cpu").slider("value", cpu);
        $("#slider-ram").slider("value", ram);
        $("#slider-hdd").slider("value", hdd);
    });

This codes does exactly what I wanted, change the values with the new ones. The problem is that in every call of slider("value", item) change is called and refreshPrice() is called 3 times (and it does an ajax call).

I have tried to do .slider("value", cpu).slider("change", function(){}); to reset the change option but it didn’t work.

How I can do it?

Answer 1

I would do something like this, change your function so you can turn it off

var pauseRefresh = false;

function refreshPrice() {
   if (pauseRefresh) return;

   // existing code
}

$(".preset").click(function(){
    var values = $(this).attr('data-item'),
        cpu = values[0],
        ram = values[2],
        hdd = values[4];

    pauseRefresh = true;

    $("#slider-cpu").slider("value", cpu);
    $("#slider-ram").slider("value", ram);
    $("#slider-hdd").slider("value", hdd);

    pauseRefresh = false;

    refreshPrice();
});