Question

I am working on creating a simple application in php and javascript. One thing I would like to do is use the jquery spinner control for a very large number of input fields (over 100).

the website can be found here: https://www.myweb.ttu.edu/timothsm/alchemy

right now the script is timing out trying to create 100 spinners in the javascript is there a better way to do this? or should i find a different way? (I am only creating a spinner on the first input field for now but the code below is what i was using to do it to all input fields)

here is the code I am using to create the spinners:

$(function() {
    $("#ings input.spinner").spinner({
        spin : function(event, ui) {
            if (ui.value > 500) {
                $(this).spinner("value", 500);
                return false;
            } else if (ui.value < 0) {
                $(this).spinner("value", 0);
                return false;
            }
        }
    });
    $("input.spinner").val(0)
});

Answer 1

You can create spinner on demand. Demo

var makeSpinner = function() {
    $("#ings").find(".ui-spinner-input").spinner('destroy'); //kill prev if any
    $(this).spinner({ //init new
        min: 0,
        max: 500
    });
}

//process clicks on spinners place holders
$("#ings").on('click', 'input.spinner', makeSpinner);