why my code does work on chrome(desktop) and not on chrome (mobile nexus 4)

4 posts, 1 answers
  1. Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 20 Nov 2013 Link to this post

    Hi 

    i'm currently working on a project under cordova / kendo ui and i'm going through a problem that i can't solve myself.

    when i'm running the project on my web browser on the computer, it works as expected but when i upload the project on my phone, there is an anormal behave ..

    here is my code : 

    <!DOCTYPE html>
    <html>
    <head>
      <title>Test</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="styles/kendo.common.min.css" rel="stylesheet" />
      <link href="styles/kendo.default.min.css" rel="stylesheet" />
      <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
      <link href="styles/index.css" rel="stylesheet" />
      <!-- Librairies -->
      <script src="lib/jquery.min.js"></script>
      <script src="lib/kendo.all.min.js"></script>
      <!-- Fonction d'init -->
      <script src="init/cordovaInit.js"></script>
      <!-- Controleurs -->
      <script src="controlers/panelControler.js"></script>
      <!-- EndScript -->
    </head>
    <body>
      <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="search">
        <div id="search">
            <div id="first">
              <p>first</p>
            </div>
            <div id="second">
              <p>second</p>
            </div>
            <div id="third">
              <p>third</p>
            </div>
        </div>
    </div>
     
    <div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home']">
      <ul data-role="listview" data-type="group">
        <li>Menu
          <ul>
            <li><a href="#drawer-home" onClick="panelControler('first')">First</a></li>
            <li><a href="#drawer-home" onClick="panelControler('second')">Second</a></li>
            <li><a href="#drawer-home" onClick="panelControler('third')">Third</a></li>
          </li>
        </ul>
      </div>
      <div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
        <header data-role="header">
          <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span>Test</span>
          </div>
        </header>
      </div>
     
      <script>
      var app = new kendo.mobile.Application(document.body);
      panelControler('first');
      </script>
    </body>
    </html>
    here is my little javascript :

    function panelControler(action){
        alert("panelControler");
        if (action === 'first'){
            alert("first show");
            $("#first").show();
            $("#second").hide();
            $("#third").hide();
        }
        else if (action === 'second'){
            alert("second show");
            $("#second").show();
            $("#first").hide();
            $("#third").hide();
        }
        else if (action === 'third'){
            alert("third show");
            $("#third").show();
            $("#second").hide();
            $("#first").hide();
        }
    }
    the problem is when i run it on the computer and i change the menu,  the <p> balise change as expected but on the mobile, it's getting stuck on the <p>first<p>
    i just don't know when this problem come from and then how to solve it ...

    thank you for helping ;-)
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 21 Nov 2013 Link to this post

    Hi Morgan,

    The issue occurs because you are working with the DOM click event which is not recommended in mobile applications. Instead of the onclick attribute please use the build-in click event of the ListView widget as it is optimized for touch.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Answer
    Morgan
    Morgan avatar
    8 posts
    Member since:
    Nov 2013

    Posted 21 Nov 2013 Link to this post

    Hi alexander, thank you so much for helping, 

    i did try using your method by following the demo on the website but on my app, the click event doesn't seem to get fired ..
    i don't see what i've done wrong when i compare my code to the code presented on the demo ...

    here is the html :

      <div data-role="view" id="drawer-search" data-layout="drawer-layout" data-title="search">
        <div id="search">
          <form action="./index.html">
            <ul data-role="listview" data-style="inset">
              <li>
                <label>Code postal
                  <input type="number" id="CP" value="59000" placeholder="" />
                </label>
              </li>
              <li>
                <label>Pays
                  <select id="Country">
                    <option value="FR">France</option>
                    <option value="ES">Espagne</option>
                    <option value="BE">Belgique</option>
                    <option value="LU">Luxembourg</option>
                  </select>
                </label>
              </li>
              <input type="hidden" id="hiddenShit" value="relais">
            </ul>
            <div style="text-align:center">
              <a class="button" data-role="button" onclick="relayControler('rechercheRelais', 'usingData')" data-icon="search">Rechecher</a>
              <a class="button" data-role="button" onclick="relayControler('rechercheRelais', 'usingPos')" data-icon="search">Autour de ma position</a>
            </div>
          </form>
         <div id="pres" style="text-align:center"></div>
        </div>
      </div>
     
    <div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-search']">
      <ul data-role="listview" data-type="group">
        <li>Menu
          <ul>
            <li><a data-role="button" href="#drawer-search" data-click="panelControler" data-att="relais">Rechercher un relais</a></li>
            <li><a data-role="button" href="#drawer-search" data-click="panelControler" data-att="nespresso">Nespresso</a></li>
            <li><a data-role="button" href="#drawer-search" data-click="panelControler" data-att="dolceGusto">Dolce Gusto</a></li>
          </li>
        </ul>
      </div>
     
      <div data-role="layout" data-id="drawer-layout" data-layout="overview-layout">
        <header data-role="header">
          <div data-role="navbar">
            <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            <span>Mondial Relay</span>
          </div>
        </header>
      </div>
    Here is my javascript :

    function panelControler(obj){
        var data = obj.button.data();
        $("#pres").empty();
        if (data.att === 'relais'){
            $("<h3>One</h3>").appendTo($("#pres"));
        }
        else if (data.att === 'nespresso'){
            $("<h3>Two</h3>").appendTo($("#pres"));
        }
        else if (data.att === 'dolceGusto'){
            $("<h3>Three</h3>").appendTo($("#pres"));
        }
    }
    Thank you :)
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Nov 2013 Link to this post

    Hello Morgan,

    The relayControler function is not supposed to be invoked as you are still using the onclick attribute.
    The panelControler function is supposed to be called as you are using data-click attribute which is the correct approach.
    Here is a small example which seems to work fine on my side. Could you please let me know what I am missing?

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready