jquery.ui.spinner change

Question

I'm trying to use the latest version of the jquery.ui.spinner.js . http://wiki.jqueryui.com/w/page/12138077/Spinner

The spinners are showing-up and updating the textboxes, but I'm having trouble figuring out how to capture the 'change' event. It triggers when you manually change the value in the textbox, but not when you use the spinner arrows.

jquery:

    $('input[name*="opening"]').spinner({ min: 0, max: 100});

    $('#doorsize6w7h-f').spinner().change(function(){
         alert($(this).spinner('value'));
    });

html:

<input type="text" value="0" class="front" id="doorsize6w7h-f" name="opening[0][0]" />

Answer 1

Attach an event on the spinner controls that calls change() on your textbox.

$('.ui-spinner-button').click(function() {
   $(this).siblings('input').change();
});

jsFiddle.

After setting up the spinner.

Answer 2

I know this question has already been answered. But I hope this will help others.

Beside manually edit the value and using the spinner's arrow button, one can also edit the value of spinner by using arrow button on keyboard. In this case, I find keyup event is more robust than change event:

$(document).ready(function(){
    var range_spinner = $('.spinner').spinner(); 

    // hack to trigger input keyup whenever spinner button clicked:
    $('.ui-spinner-button').click(function() { $(this).siblings('input').keyup(); });   

    // keyup will catch any stroke on keyboard
    $('#range').keyup(function(){
       console.log(range_spinner.spinner('value')); 
    });
});

Answer 3

I think this is what you need:

$('.mySpinner').spinner({          
    stop:function(e,ui){
        alert('Triggered after a spin.');
    }
});

Unlike binding to the click event of the buttons, this will also detect use of the up/down keys on the keyboard.

See this page for details and more events: http://api.jqueryui.com/spinner/#entry-examples

Answer 4

This is giving me the most fluid results:

function betterSpinner(input)
{
    input.spinner(
    {
        spin: function(event, ui)
        {
            // the spin event is raised before the value actually gets changed,
            // so let's update it here before raising the input's change() event.
            input.val(ui.value);
            input.change();
        }
    });
}

$(document).ready(function ()
{
    betterSpinner($("#myInput"));
});

Answer 5

There is no "change" event, instead use "spinstop" event:

$('#doorsize6w7h-f').on("spinstop", function(){
   alert($(this).spinner('value'));
});

The documentation also suggests spinchange event, but it's kind of laggy for me.

Resource: http://api.jqueryui.com/spinner/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DUI%2FSpinner%2Fspinner%26redirect%3Dno#event-change

Answer 6

Well, actually I would route changes through standard 'change' event and capture everything, like that:

$('input[name*="opening"]').spinner({
    min: 0,
    max: 100,
    spin: function(event, ui) {
        $(this).change();
    }
});