This is a migrated thread and some comments may be shown as answers.

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

3 Answers 82 Views
Drawer (Mobile)
This is a migrated thread and some comments may be shown as answers.
Morgan
Top achievements
Rank 1
Morgan asked on 20 Nov 2013, 09:08 PM
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 ;-)

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 21 Nov 2013, 02:28 PM
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!
0
Accepted
Morgan
Top achievements
Rank 1
answered on 21 Nov 2013, 05:23 PM
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 :)
0
Alexander Valchev
Telerik team
answered on 25 Nov 2013, 11:40 AM
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!
Tags
Drawer (Mobile)
Asked by
Morgan
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Morgan
Top achievements
Rank 1
Share this question
or