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 () 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.
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./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.
Share Improve this question edited May 30, 2009 at 0:39 Kevin asked May 29, 2009 at 16:04 KevinKevin 9563 gold badges11 silver badges24 bronze badges 2- <label for="label1"></label> shouldn't this be id="label1"? $("#label1").html($("#s1").spinner("value")); – Chris MacDonald Commented May 29, 2009 at 18:27
- Thanks Chris. I've modified the question above since the handler doesn't seem to be executing in the first place. – Kevin Commented May 30, 2009 at 0:37
2 Answers
Reset to default 4According 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.
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>