CODEWITHSUNDEEP
jqueryhtmljquery-ui
user2359244
user2359244

Reputation: 37

JqueryUI Spinner issue

Hi i am having problems inserting spinner from jquery UI. below is my code, can someone help me, i would be grateful. I cant get it to appear just makes all my work disappear :S

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">


        //This creates a spinner for each of the weighting boxes for the user to have an easier way of selecting their desired values
          $(function() {
            var spinner = $( "x" ).spinner({
                min:0});
            var spinner = $( "y" ).spinner({
                min:0});
            var spinner = $( "z" ).spinner({
                min:0});
            });     

        $(document).ready(function()  
        {
            var x ='x';
            var y = 'y';
            var z = 'z';
            // user variables declared

            $('<tr><td>'+x+'</td>' +
                  '<td><input id="'+x+'" class="textbox" type="text" id = "x" value="1" />'+ // text boxes for each variable created
                  '</td></tr>').appendTo('#menu');

             $('<tr><td>'+y+'</td>'+
                  '<td><input id="'+y+'" class="textbox" type="text" id = "y" value="1" />'+
                  '</td></tr>').appendTo('#menu');

             $('<tr><td>'+z+'</td>'+
                  '<td><input id="'+z+'" class="textbox" type="text" id = "z" value="1" />'+
                  '</td></tr>').appendTo('#menu');

Upvotes: 2

Views: 1925

Answers (1)

SirDerpington
SirDerpington

Reputation: 11470

There were too many errors to only post a comment so here it is (be aware that I don't know what your whole code/HTML markup looks like so some errors aren't real errors perhaps)

First of all there is no jQuery UI script tag in your code. But I guess this is just the case for your code example and not for your whole code. If not:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

In your $(function() { }); you say it creates a spinner for each weighting box. But all you do is declare and overwrite one variable ( var spinner) 3 times. Also it is not necesarry to use variables for it. But anyway:

$(document).ready(function() {
    var spinnerOne = $( "#x" ).spinner({
        min:0});
    var spinnerTwo = $( "#y" ).spinner({
        min:0});
    var spinnerThree = $( "#z" ).spinner({
         min:0});

    //alternative without using variables:
    $('#x').spinner({ min: 0 });
});

I also changed your selectors from e.g. $( "z" ) to $( "#z" ) because you want to init the spinners on <inputs>s with the specified ID.

$('#element') is a selector for a element with the id "element" (usually only one)

$('.element'). is a selector for elements with a class "element" (if more than one with this class exists all get selected)

This is like in CSS where you select a class of elements with a dot . and an ID with a hash #

Because I already named the ID topic. All of your input fields have two IDs but an ID is a unique identifier. (perhaps this is just there in the sample code to show what you tried)

You need to correct them like this

<input class="textbox" type="text" id="x" value="1" />

In fact there's also no need for a connecting + because you only try to append HTML (except the '<tr><td>'+x+'</td>')

It's redundant to write the spinners in a seperate function. $(function () { });and $(document).ready(function () { });are for the same purpose. See this stackoverflow thread for more information. But what simply can't work is to initialize the spinners before even creating the elements for which the spinners should be created. I'm not sure why you create some elements in a $(document).ready() because you easily could do this in your html template.

I'd recommend you to create a jsfiddle. It provides us with a more accurate view of the problem you have resp. what your current progress is. It would be helpful to really describe your problem and what exactly doesn't work in which context.

Here is a working example of your markup in a modified way. Please be sure to know what you do.

Upvotes: 1

Related Questions