CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-core
Svenmarim
Svenmarim

Reputation: 3735

Jquery spinner spin event delayed in value

INFO

I want to update the text in a button when the value of the spinner changes. Here for I needed to add 2 events to the spinner. The change event and the spin event. The change event is triggered when the user has pressed a button (for instance to add +10 value or -10 value). The spin event is triggered when the user clicks on the ui-spinner-buttons to add +1 or -1 value. I have the following code to update the text of the button:

CODE

var spinner = $("#spinnerTool").spinner(
    {
        change: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        },
        spin: function (event, ui) {
            $("#payCoinsBtn").html('Pay €' + $(this).val());
        }
    }
);

$("#plusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue + 10);
});

$("#minusTen").click(function () {
    var spinnerValue = parseInt($("#spinnerTool").val());
    spinner.spinner("value", spinnerValue - 10);
});

//HTML
<div id="spinner">
    <button id="minusTen" type="button">- 10</button>
    <input id="spinnerTool" name="value" value="1" min="1">
    <button id="plusTen" type="button">+ 10</button>
</div>

ISSUE

When a button is pressed and the change event is triggered the correct text with value is inside the button (for instance "Pay €10"), but when the ui-spinner-buttons are pressed and the spin event is triggered, the value inside the buttons always is 1 step behind. So when the value inside the spinner is 3 then the text inside the buttons says "Pay €2".

Why is this happening in the spin event and not in the change event and how can I solve this?

Upvotes: 0

Views: 307

Answers (2)

Meziane
Meziane

Reputation: 1667

Use the stop event:

var spinner = $("#spinnerTool").spinner(
{
   stop: function (event, ui) {
      //alert("Current = " + $("#spinnerTool" ).spinner("value")) ;
      $("#payCoinsBtn").html('Pay €' + $(this).val());
   },
    ...             }
});

Upvotes: 1

Svenmarim
Svenmarim

Reputation: 3735

Apparently the spin event was called before the current value got increased or decreased by 1. So I put the code to change the button text in the function that is called AFTER the current value is increased or decreased. Like this:

$('.ui-spinner-up').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

$('.ui-spinner-down').click(function () {
    $("#payCoinsBtn").html('Pay €' + $("#spinnerTool").val());
});

Upvotes: 1

Related Questions