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

Navigation is Break after First usage

3 Answers 118 Views

General Discussions

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

Mahmoud asked on 16 Feb 2013, 09:19 AM

Hi I Have 2 Html pages each one have a view and each view have a link button to navigate between each view,
and when I click the Main Menu link it's navigate successfully to the Main Menu view and when I click on Home it's navigate back.

But when I click Main menu again it's do nothing.

note: I'm testing the app via note: I'm testing the app via ICENIUM Graphite.

index.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

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

<link href="styles/main.css" rel="stylesheet" />

<script src="cordova.js"></script>

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

<script src="kendo/js/kendo.mobile.min.js"></script>

<script src="scripts/hello-world.js"></script>

</head>

<body>

<div data-role="view" data-title="Home" id="mainPageView">

<a data-role="button" href="MainMenu.html">Main Menu</a>

</div>

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

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="footer">

</div>

<script>

var app = new kendo.mobile.Application(document.body,{transition:"silde",layout:"mainLayout"});

</script>

</body>

</html>

mainMenu,html

<div data-role="view" data-title="Main Menu" id="mainMenuView">

<p>Main Menu</p>

<a href="index.html" data-role="button" >Home</a>

</div>

3 Answers, 1 is accepted

answered on 18 Feb 2013, 08:40 PM

Hi Mahmoud,

This is a really weird issue. I don't know why the button only links to the second page on the first click, yet fails any other attempt. I have easily fixed the problem by adding two 'views' inside the same file, but this does not help if you are trying to separate your work between two files simultaneously. Take a look at the code I provided and see if it can help you on your project.

<div data-role="view" data-title="Home" id="mainPageView">

Home<br/>

<a data-role="button" href="#mainMenu">Navigate to Main Menu</a>

</div>

<div data-role="view" data-title="Main Menu" id="mainMenu">

Main Menu<br/>

<a data-role="button" href="#mainPageView">Navigate Home</a>

</div>

Good luck,
Quinn McTiernan

answered on 19 Feb 2013, 08:52 AM

Hello guys,

@Mahmoud as I understood it, you would like to link to the 'home' View from your remote View. Since the 'home' View is located at the index page, it is a local view meaning that you should use href="#mainPageView".

<div data-role="view" data-title="Main Menu" id="mainMenuView">

<p>Main Menu</p>

<a href="#mainPageView" data-role="button">Home</a>

</div>

I hope this will help.

Regards,
Alexander Valchev
the Telerik team

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