top of page

My trysts with Jquery Spinner

Challenge after many weeks!!

When I added the spinner from ace-spinner template, the spinner worked beautifully except it bombed during the client demo.

Here is what happened - 

1. On load the textbox is created, document.ready calls fuelx spinner on page load  - 

  https://github.com/ExactTarget/fuelux.

 

Jquery for the same as below - 

 

function initforcastTemplatePage() {
    initSpinners();
    bindAllSpinnerEvents();
    initForCastReportForm();
    enableNomineeAutoComplete();
  
}

 

bindAllSpinnerEvents calls the + and - signs to add and remove rows respectively on the next element  as below - 

function bindAllSpinnerEvents() {
    $('*[id*=forecast-number-]').each(function () {
       var PlusSign = $(this).next().children();
        var MinusSign = $(this).prev().children();
        //enable save button on form only if forecasted no > 0  or any rows found
       
        $(MinusSign).click(function (e) { //remove row
            var cntrl = $(MinusSign);
            var courseId = $(cntrl).parents("#CourseGroup").find("#CourseId").val();
            var txtboxVal = $(cntrl).parents("#CourseGroup").find('*[id*=forecast-number-]').val();
           


            var oldtxtboxVal = parseInt(txtboxVal)+1;
            $(this).parents("#CourseGroup").find('#nomineeRow-' + courseId + '-' + oldtxtboxVal).remove();
            enableNomineeAutoComplete();
        });
        $(PlusSign).click(function (e) { //add row
            var cntrl = $(PlusSign);
            var Parent = $(cntrl).parents("#CourseGroup");
            var courseId = Parent.find("#CourseId").val();
            var txtboxVal = Parent.find('*[id*=forecast-number-]').val();
           

            $.ajax({
                async: true,
                url: 'forcast/CreateNomineeRow',
                data: { courseId: courseId, foreCastedNo: txtboxVal },
                success: function (response) {
                    Parent.find("#nominee-table-" + courseId + " > tbody").append(response);
                    enableNomineeAutoComplete();
                },
                cache: false,
                error: function (response) {
                    //show error
                    //unique name check
                }
            });

        });

    });
   
 
  
}
 

But alas it does not stop the mouse wheel on scroll when the spinner textbox is clicked. That set me thinking and after 45 minutes of R&D found a small fix - 

document.getElementById(élementid').onwheel = function () { return false; } 

TADA!!! Problem solved!!! Hope it helps some one!!

Copyright 2019 Sylvia Lobo

  • s-facebook
  • s-tbird
bottom of page