views:

971

answers:

2

Hi,

I've been stumped on this problem for over a week :( Any insight into this problem would be hugely appreciated!

How do I link a jQuery UI number spinner/stepper (http://wiki.jqueryui.com/Spinner) so that a label text value changes as the spinner value increments or decrements?

    ...
        <script type="text/javascript">


                $(document).ready(function() {

                    $("#s1").spinner({max: 100, min: -100});

                    $("#s1").bind("spin", function() {
                      $("label1").innerText = $("#s1").spinner("value");
                    });
                });
        </script>
    ...

<body>
...
    <p><label for="s1">Basic:</label> <input id="s1" name="value"/></p>
    <p><label for="label1"></label></p>
...
</body>

Thanks!

Edit: In addition to the output issue, there appears to be problem with the handler itself. The handler doesn't execute when I spin/change the spinner.

A: 

Try this - from your sample above I changed your label to a span so the text would have somewhere to go, used this.value inside the spin handler, and jQuery's .html() to dump the value.

<script type="text/javascript">
        $(document).ready(function() {

            $("#s1").spinner({max: 100, min: -100});

            $("#s1").bind("spin", function() {
              $("#label1").html(this.value);
            });
        });
</script>

<body>
  <p><label for="s1">Basic:</label> <input id="s1" name="value"/></p>
   <p><span id="label1"></span></p>
</body>
Thanks for your post. I tried this however I'm still unable to get the it working. I think there is also an issue with the event handler itself since it doesn't appear to be executing when I change the spinner. Thanks.
Walter
+1  A: 

According to the UI/Spinner documentation, the name of the spinner change event is not "spin", but "spinchange". If you change the parameter of the .bind method accordingly, things should work.

Franz
Thank you. It works now :)
Walter