jqxNumberInput iPad issues

[gacliqueParticipant]

There seems to be an issue with using the jqxNumberInput on iPad iOS 7 Safari.

Issue 1 – If I use inputmode: ‘simple’ jqxall.js will error with ‘undefined’ is not an object (evaluating ‘this.items[k].canEdit’)

Issue 2 – The event valuechanged does not trigger on iPad. I need to use this event instead of the change event but it doesn’t trigger at all on the iPad.

We are using jqWidgets 3.1
jquery 1.10.2
knockout 3.0

here’s our declaration of the control…

<div id='creditHours' data-bind="jqxNumberInput: {value: Credits, inputMode: 'simple', spinMode: 'simple', spinButtons: true, spinButtonsStep: .25, min: 0, max: 1000, textAlign: 'right' }"></div>

here’s the js for event binding

<script>
$(function () {
$('#creditHours').on('valuechanged', function (event) 
            {
                var creditAmt = event.args.value;
                console.log('credit hours: ' + creditAmt);
                
            }); 
}
</script>

[Peter StoevKeymaster]

Hi gaclique,

1. Use the “change” event – it is raised when there is a change in the “value”.
2. Don’t set the inputMode.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[gacliqueParticipant]

The “change” event could work but it doesn’t trigger immediately until the control loses focus. We have other controls that are binding through knockout based on this value so below is the fix we implemented.

<div class="form-group">
        <label for="creditHours">Credits</label>
        <div id='creditHours' data-bind="jqxNumberInput: {value: Credits, width: '100px', height: '40px', inputMode: numberInputType, spinMode: 'simple', spinButtons: true, spinButtonsStep: .25, min: 0 }"></div>
    </div>

<script>
var numberInputType = 'simple';
var numberInputEvent = 'valuechanged';

if (is_iPad_device()) {   
            numberInputType = 'textbox';
            numberInputEvent = 'change';
        } 

$(function () {
$('#creditHours').on(numberInputEvent, function (event) 
            {
                var creditAmt = event.args.value;
                console.log('credit hours: ' + creditAmt);
                
            }); 
}
</script>

[Author]

Posts