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 139 Views

Drawer (Mobile)

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

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" />

<script src="lib/jquery.min.js"></script>

<script src="lib/kendo.all.min.js"></script>

<script src="init/cordovaInit.js"></script>

<script src="controlers/panelControler.js"></script>

</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 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

Accepted

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 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 :)

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?

http://jsbin.com/AHiDOSiJ/2/edit (code + result)
http://jsbin.com/AHiDOSiJ/2 (result only, suitable for mobile devices)

Regards,
Alexander Valchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!