1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    ravimone is on a distinguished road

      0  

    Default Unanswered: setHtml and javascript onclick function not called when checked on android and iphone

    Unanswered: setHtml and javascript onclick function not called when checked on android and iphone


    Code:
    Ext.define('Fxtrade.view.ClosingRates', {
        extend: 'Ext.Container',
        requires: [
        current = new Date()
        ],
        alias: 'widget.ClosingRates',
        config: {   
            baseCls : 'whitebg',
        
    items:[
            {
            items:[
            {
                xtype:'panel',
                layout:'card',
                scrollable: true,
                id:'thirdpanel',
                height:'75%',
                style:'background-color:white;'
            },
            {
                xtype: 'formpanel',
                id : 'ClosingPanel'
            }
            ]
            }],
            listeners : {
                painted : getloadAccor
               
            }
        }
    });
    
    function getloadAccor() {       
                         
        var accordionHtml= '<div id="AccordionContainer" class="AccordionContainer">';
        for(var i=0; i<1; i++){                 
            accordionHtml+='<div onclick="runAccordion(1); >\n\
           <div id="closedOrder"  class="AccordionTitle" onselectstart="return false;">Accordion 1</div></div>\n\
    <div id="Accordion1Content" class="AccordionContent">I Am Accordion 1. </div>\n\
    <div onclick="runAccordion(2);"><div class="AccordionTitle" onselectstart="return false;">Accordion 2</div>\n\
    </div>  <div id="Accordion2Content" class="AccordionContent">I Am Accordion 2.  </div>\n\
    <div onclick="runAccordion(3);"><div class="AccordionTitle" onselectstart="return false;">Accordion 3</div>  </div>\n\
    <div id="Accordion3Content" class="AccordionContent">I Am Accordion 3.  </div>\n\
    <div onclick="runAccordion(4);"><div class="AccordionTitle" onselectstart="return false;">Accordion 4</div>  </div>\n\
    <div id="Accordion4Content" class="AccordionContent">I Am Accordion 4.  </div><div onclick="runAccordion(5);"><div class="AccordionTitle" onselectstart="return false;">Accordion 5</div>  </div>  <div id="Accordion5Content" class="AccordionContent">I Am Accordion 5.  </div>';      
                       
       }
       
      
        accordionHtml+='</div>';
        var CurrView=Ext.getCmp('thirdpanel');
        CurrView.removeAll( true, true );
                    
        Ext.getCmp('thirdpanel').setHtml(accordionHtml);
                    
    }
    //And i have included a js file, which has this 'runAccordion' function,
    When i checked in my desktop system, chrome browser, the function is called, and working as expected,
    But when checked on device android or iphone, the fucntion is not called, the onclick event is not called.

    PLEASE HELP ME TEAM, I AM LEFT WITH VERY LESS TIME,
    PLEASE HELP ME ASAP.

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Do not use onclick handlers! There is no such thing as a "click" event in mobile browsers. This is why it's not working.

    What you should be doing is registering a "tap" listener via Ext.get or Ext.query.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,617
    Answers
    3450
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would probably use one listener and delegate it to work with the elements you want. Here is an example:

    Code:
    new Ext.Container({
        fullscreen : true,
        scrollable : true,
        html       : [
            '<div>I do not have a listener on me</div>',
            '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>',
            '<div>I do not have a listener on me</div>',
            '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>',
            '<div>I do not have a listener on me</div>',
            '<div class="listenToMe"><span>The parent div has a tap listener on it!</span></div>'
        ].join(''),
        listeners  : {
            element  : 'element',
            delegate : 'div.listenToMe',
            tap      : function() {
                console.log('div.listenToMe was tapped on');
            }
        }
    });
    I tried to color the mappings, the delegate event config takes in a DOM query selector, in this case, any <div> that has a class of listenToMe will fire the tap event. The element config configures the tap to work on the element of the component it is on.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.