Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
AddEventListener
Message
 
 
General information
Forum:
Javascript
Category:
JQuery
Miscellaneous
Thread ID:
01560661
Message ID:
01560687
Views:
55
>>Hi everybody,
>>
>>I've noticed that when I changed page using the spinner in the pager control of the flexigrid (I made that change a while ago to use input type="number") the spinner change didn't trigger the actual page change event. BTW, another observation - input type="number" does not seem to disallow entering non numbers.
>>
>>Anyway, I made a google search and found this interesting article
>>http://girliemac.com/blog/2011/11/27/html5-input-events
>>
>>I went ahead and added the code with addEventListener and was surprised when my flexigrid stopped working.
>>
>>So then I made another google search on "addEventListener" and found that this is Silverlight event. So, I assume I can not use it in my jquery code.
>
>It's not Silverlight - it's in W3 DOM... http://www.w3.org/TR/DOM-Level-2-Events/events.html
>
>>
>>So, how should I handle the oninput event?
>>
>>Thanks a lot in advance.

Yes, I figured this last night, but I could not use it in that context anyway. Here is the code I implemented last night and it works:
// add pager
        if (p.usepager) {
            g.pDiv.className = 'pDiv';
            g.pDiv.innerHTML = '<div class="pDiv2"></div>';
            $(g.bDiv).after(g.pDiv);
            var html = ' <div class="pGroup"> <div class="pFirst pButton"><span></span></div><div class="pPrev pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pcontrol">' + p.pagetext +
                ' <input type="number" size="4" value="1" class="numericOnly" /> ' + p.outof +
                ' <span> 1 </span></span></div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pNext pButton"><span></span></div><div class="pLast pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"> <div class="pReload pButton"><span></span></div> </div> <div class="btnseparator"></div> <div class="pGroup"><span class="pPageStat"></span></div>';
            $('div', g.pDiv).html(html);
            $('.pReload', g.pDiv).click(function () {
                g.populate()
            });
            $('.pFirst', g.pDiv).click(function () {
                g.changePage('first')
            });
            $('.pPrev', g.pDiv).click(function () {
                g.changePage('prev')
            });
            $('.pNext', g.pDiv).click(function () {
                g.changePage('next')
            });
            $('.pLast', g.pDiv).click(function () {
                g.changePage('last')
            });           
           // This is what I added 
            $('.pcontrol input', g.pDiv).change(function (e) {
                g.changePage('input');
            });                                   
         // End of my last night changes
            $('.pcontrol input', g.pDiv).keydown(function (e) {
                if (e.keyCode == 13) g.changePage('input');
                // Allow: backspace, delete, tab, escape, and enter
                if (e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 27 ||
                    // Allow: Ctrl+A
                    (e.keyCode == 65 && e.ctrlKey === true) ||
                    // Allow: home, end, left, right
                    (e.keyCode >= 35 && e.keyCode <= 39)) {
                    // let it happen, don't do anything
                    return;
                }
                if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
                });
If it's not broken, fix it until it is.


My Blog
Previous
Reply
Map
View

Click here to load this message in the networking platform