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

Navigate from data-init event

6 Answers 481 Views

Application

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

AmrElsayed asked on 18 Apr 2012, 04:05 PM

Hello,

I am using kendo mobile, and I am trying to navigate to a view in page-init event, but it is not working.

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>

<script type="text/javascript" charset="utf-8" src="kendo.mobile.min.js"></script>

<link href="kendo.mobile.all.min.css" rel="stylesheet"/>

</head>

<body>

<div data-role="view" id="settings" data-layout="commonLayout" >

Login

</div>

<div data-role="view" id="favorites" data-layout="commonLayout" data-init="favoritesPageInit">

Featured

</div>

<div data-role="layout" data-id="commonLayout">

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#favorites" data-icon="favorites">Favorites</a>

<a href="#settings" data-icon="settings">Setting</a>

</div>

</footer>

</div>

<script type="text/javascript" charset="utf-8">

var app = new kendo.mobile.Application($(document.body), { initial: "settings" });

function favoritesPageInit(e){

app.navigate("#settings");

}

</script>

</body>

</html>

When I am running the simple code above, click on the 'favorites' icon of the tabstrip, I am expecting to navigate to the 'login' view, but it is not working well.

Am I missing anything?

Thanks,
Amr

6 Answers, 1 is accepted

answered on 19 Apr 2012, 11:14 AM

Thanks Petyo,

I tried the navigation from the data-show event but it is not working too

<div data-role="view" id="settings" data-layout="commonLayout" >

Login

</div>

<div data-role="view" id="favorites" data-layout="commonLayout" data-show="favoritesPageShow">

Featured

</div>

<div data-role="layout" data-id="commonLayout">

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#favorites" data-icon="favorites">Favorites</a>

<a href="#settings" data-icon="settings">Setting</a>

</div>

</footer>

</div>

<script type="text/javascript" charset="utf-8">

var app = new kendo.mobile.Application($(document.body), { initial: "settings" });

function favoritesPageShow(e){

app.navigate("#settings");

}

</script>

Do you have any suggestions?

Amr

answered on 23 Apr 2012, 10:19 AM

Thanks Petyo,

It seems like that it is working, however, unfortunately, if I have a data-init event attached to the 'settings' view it won't be fired when the app navigates to the view.

<div data-role="view" id="settings" data-layout="commonLayout" data-init="settingsInit">

<a href="#favorites">Login</a>

</div>

<div data-role="view" id="favorites" data-layout="commonLayout" data-show="favoritesPageShow">

Featured

</div>

<div data-role="layout" data-id="commonLayout">

<footer data-role="footer">

<div data-role="tabstrip">

<a href="#favorites" data-icon="favorites">Favorites</a>

<a href="#settings" data-icon="settings">Setting</a>

</div>

</footer>

</div>

var app = new kendo.mobile.Application($(document.body), { initial: "settings" });

function favoritesPageShow(e){

setTimeout(function() {

app.navigate("#settings");

}, 0);

}

function settingsInit(e){

alert('settings');

}

When I clicked on 'favorites' the settings view is displayed, but the alert('settings') is not prompted.

Even, if I removed the navigation code, and try to navigate to the settings view simply by clicking on the 'settings' icon in the tabstrip, the init event will not fire too.

var app = new kendo.mobile.Application($(document.body), { initial: "settings" });

function favoritesPageShow(e){

//setTimeout(function() {

// app.navigate("#settings");

//}, 0);

}

function settingsInit(e){

alert('settings');

}

Do I miss anything?

Amr