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

e.preventDefault in before-show method (sometimes) breaks the application

2 Answers 73 Views

General Discussions

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

Alex Smith asked on 12 Feb 2014, 04:28 PM

sandbox.zip

I am following the documentation here http://docs.telerik.com/kendo-ui/api/mobile/view#events-beforeShow
It suggests that if you want to redirect to another view while evaluating the application's state in the before show method, you should use the e.preventDefault() method.

I have put together a small test application using this strategy and when this pattern is followed the entire application stops working. No stack traces are thrown, no errors logged. The kendo application simply dies.

I am using kendo v2013.3.1324 with the bundled jQuery (v1.9.1)

To illicit the behavior with the attached application follow these steps:
1) Click on the view 2 link. This is the protected view so you should be directed back to view 1.
2) Click on the view 3 link. This is not a protected view so you should see view 3.
3) Click on the view 1 link. This is not a protected view so you should see view 1.
4) Click on the view 2 link again. The application stops with no warning. Links are dead, no interaction with the app can be performed.

I've attached an app that illustrates this behavior and included the code below:

<html>

<head>

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

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

<link href="styles/kendo.mobile.common.min.css" rel="stylesheet" type="text/css" />

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

</head>

<body>

<div id="view1" data-role="view" style="background:grey;">

<ul data-role="listview">

<li>This is view 1</li>

<li><a href="#view2" data-transition="fade">Go to view2 »</a></li>

<li><a href="#view3" data-transition="fade">Go to view3 »</a></li>

</ul>

</div>

<div id="view2" data-role="view" data-before-show="protect">

<ul data-role="listview">

<li>This is view 2</li>

<li>You should never see this</li>

</ul>

</div>

<div id="view3" data-role="view">

<ul data-role="listview">

<li>This is view 3</li>

<li><a href="#view1">Go to view 1 »</a></li>

</ul>

</div>

<script type="text/javascript">

var app = new kendo.mobile.Application($(document.body), {

skin: "flat",

transition: "fade"

});

function protect(e)

{

console.log("protect method");

e.preventDefault();

app.navigate("#view1");

}

</script>

</body>

</html>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

e.preventDefault in before-show method (sometimes) breaks the application

2 Answers, 1 is accepted