1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default Unanswered: strange behavior of tap event applied to html table headers

    Unanswered: strange behavior of tap event applied to html table headers


    Hi Sencha forums,

    I have an HTML table in one of my views that I wanted to make sortable, so I assigned tap event handlers to the table's headers like so:

    Code:
    var heads = document.getElementsByTagName('th')
    for(header_index in heads) {
        var header =  heads[header_index];
        if(!Ext.get(header).hasListener('tap')){
            Ext.get(header).on(
                'tap',
                sort_table
            );
        }
    }
    where sort_table is the function:
    Code:
    function sort_table() {
        alert(this.dom.innerHTML); // for debugging
        var header = this;
        var table = document.getElementById('sorttable');
        var rows = Array.prototype.slice.call(table.rows);
        var rows_sorted;
    
    
        if (/\u2193/.test(header.dom.innerHTML)) {
            rows_sorted = rows.slice(1).sort(function(a,b) {
                var atext = a.cells[header.dom.cellIndex].outerText.toLowerCase();
                var btext = b.cells[header.dom.cellIndex].outerText.toLowerCase();
                if      (atext<btext) {return -1;}
                else if (atext>btext) {return 1;}
            });
            header.dom.innerHTML = header.dom.innerHTML.slice(0,-1)+'\u2191'
        }
        
        else { 
            rows_sorted = rows.slice(1).sort(function(a,b) {
                var atext = a.cells[header.dom.cellIndex].outerText.toLowerCase();
                var btext = b.cells[header.dom.cellIndex].outerText.toLowerCase();
                if      (atext<btext) {return 1;}
                else if (atext>btext) {return -1;}
            });
                 
            for(head_index in table.rows[0].cells) {
                if (/^[\d]+$/.test(head_index)) {
                    var head = table.rows[0].cells[head_index];
                    if (/\u2193/.test(head.innerHTML) || /\u2191/.test(head.innerHTML)) {
                        head.innerHTML = head.innerHTML.slice(0,-1);
                    }
                }
            }
            header.dom.innerHTML += '\u2193';
        }
    
    
    
    
        for (rowindex in rows_sorted) {
            table.rows[1].parentNode.insertBefore(rows_sorted[rowindex].parentNode.removeChild(rows_sorted[rowindex]), table.rows[1]);
        }
    }
    On a desktop browser this works spiffingly well, but on an ipad I'm getting strange behavior. Let me describe:

    the first two times I tap a header, it sorts the table accordingly.
    The third time, the tap event is fired for the second header I tapped, and then fired for the third header I tapped.
    The fourth time the tap event is fired for the proper header.
    the fifth time it fires for the fourth header I tapped, then it fires for the fifth header.
    the sixth time the tap event is fired for the proper header
    the seventh time it fires for the sixth header I tapped, and then for the seventh header.
    [etc]

    [EDIT] - I found out that the extra tap event doesn't just happen when you tap another header, it happens the next time you tap anywhere on the screen.

    I don't know what to make of this. Your wisdom is appreciated.

    Thanks,
    Cesium

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,637
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Are you using ExtJS or Touch? I suspect you are using ExtJS. If this is the case, please note that although applications may work on mobile devices, they are not supported.

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Answers
    1
    Vote Rating
    0
    Cesium is on a distinguished road

      0  

    Default


    Aww, crap, I meant to post this in the Touch forums, sorry : /
    Should I delete this and repost or can I get a transfer?

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,637
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Moved

    Scott.

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar