jQuery Spinner not working, shows a normal textbox instead

Question

I am using jQuery Spinner to show a textbox with increment/decrement options.

For now, I have written very basic code to create the spinner.

HTML

<input id="spinner" name="value">

jQuery

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
    $(function() {
        $(".spinner").spinner();
    });
</script>

Here’s a jsFiddle.

After rendering on the page, it shows a plain textbox, and in the console, I get these errors:

• ReferenceError: jQuery is not defined

  })( jQuery );
  

• TypeError: $(...).spinner is not a function

  $("#spinner").spinner();
  

Have I forgotten to call some extra jQuery, or something else?

Answer 1

Make sure in you're indeed correctly referencing jQuery and before jQueryUI. In that case it works:

jsfiddle.net/NY4mE/1/ -- using jsFiddle references

OR

jsfiddle.net/NY4mE/3/ -- using direct links like in your own sample

Answer 2

You haven't selected a jquery library.You need to select appropriate Jquery framework for you .

If your other frameworks are using jquery you must include the jquery library befoore including other libraries

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

DEMO