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 47 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Alex Smith
Top achievements
Rank 1
Alex Smith asked on 12 Feb 2014, 04:28 PM
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>

2 Answers, 1 is accepted

Sort by
0
Alex Smith
Top achievements
Rank 1
answered on 12 Feb 2014, 04:39 PM
I've confirmed that this issue exists in these builds as well:
v2013.3.1119
v2013.3.1316
v2013.3.1408
0
Petyo
Telerik team
answered on 14 Feb 2014, 12:24 PM
Hello Alex,

Many thanks for reaching out - indeed this is a problem we have introduced in the Q3 release, related to the browser history synchronization. We are about to address it as soon as possible and release an internal build which fixes it (most probably middle next week). I am updating your telerik points for this finding. 

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Alex Smith
Top achievements
Rank 1
Answers by
Alex Smith
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or