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 :
here is my little javascript :
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 ;-)
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
>
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();
}
}
i just don't know when this problem come from and then how to solve it ...
thank you for helping ;-)