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

app.navigate error Cannot call method 'navigate' of undefined v2013.1.514

16 Answers 552 Views

Application

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

16 Answers, 1 is accepted

answered on 04 Jul 2013, 01:06 PM

I'm using the Icenium simulator . My application uses Cordova and the Barcode Scanner plugin. I am also including the Kendo web css and javascript as some of your examples needed the web for the drop down form control (shown in mobile demos). Both iOS and Android simulators have the issue. I am using remote (partial) views from an ASP.NET MVC site. verifylogin() of the rootView will check their login and either prompt or app.Navigate() into the main application. I have dynamic URL logic so that I can toggle between development and production. See below for my layout. Hope this helps.

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

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

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

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

<link href="kendo/styles/kendo.dataviz.uniform.min.css" rel="stylesheet" />

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

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

<script src="scripts/dateHelpers.js"></script>

<script src="scripts/main.js"></script>

</head>

<body>

<script type="text/javascript">

globalValues['UserId'] = "0";

globalValues['RootUrl'] = "http://192.168.1.129";

//globalValues['RootUrl'] = "https://mycompany.com";

window.onerror = function (msg, url, line) {

publishError(msg, url, line, globalValues['UserId']);

return false;

};

</script>

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

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

<script src="scripts/jquery.unobtrusive-ajax.min.js"></script>

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

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

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

<div id="overlay" class="overlay" style="display: none;"></div>

<div id="rootView" data-role="view" data-before-show="verifyLogin" data-hide="onHide"></div>

<div data-role="layout" data-id="mobile-tabstrip">

<div data-role="footer">

<div id="tabMain" data-role="tabstrip" class="tabstrip">

<a href="http://0.0.0.0" data-icon="home">Home</a>

<a href="http://0.0.0.0/IMS" data-icon="ims">IMS</a>

<a href="http://0.0.0.0/CRM" data-icon="crm">CRM</a>

<a href="http://0.0.0.0/Setup" data-icon="setup">Setup</a>

<a href="http://0.0.0.0/Options" data-icon="menu">Options</a>

</div>

<script type="text/javascript">

var app = null;

$(function () {

$("a[href^='http://0.0.0.0']")

.each(function() {

var href = $(this).attr("href");

href = href.replace("http://0.0.0.0", globalValues['RootUrl']);

this.href = href;

});

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

initial: "rootView",

transition:'slide'

});

</script>

</body>

</html>

answered on 08 Jul 2013, 08:58 AM

Hi Bill,

I am afraid that after stripping the references which should not affect this behavior, I could not reproduce the problem in both Icenium Mist and Graphite. Below is my source code, using the 703 internal build:

<div id="rootView" data-role="view" data-layout="mobile-tabstrip">

Foo

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<div data-role="footer">

<div id="tabMain" data-role="tabstrip" class="tabstrip">

<a href="http://0.0.0.0" data-icon="home">Home</a>

<a href="http://0.0.0.0/IMS" data-icon="ims">IMS</a>

<a href="http://0.0.0.0/CRM" data-icon="crm">CRM</a>

<a href="http://0.0.0.0/Setup" data-icon="setup">Setup</a>

<a href="http://0.0.0.0/Options" data-icon="menu">Options</a>

</div>

<script type="text/javascript">

var app = null;

$(function () {

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

initial: "rootView",

transition:'slide'

});

</script>

Did you see any javascript errors in your project when you upgraded to the new build? Perhaps this can give us some clue on what happened.

Another reason for the problem may be that recent versions of phonegap require the app to be instantiated in the deviceready DOM event handler (a cordova specific event). Please give that a try, too.

Regards,
Petyo
Telerik

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

Accepted

answered on 26 Sep 2013, 12:39 PM

I am still getting this error "TypeError: this.pane is undefined" in kendo.mobile.min.js line 14 show in console chrome browser. I am trying to the system once auth credential are verified its going to next view by using app.navigate().

Again if i try to come for login view, there i am checking using data-init/data-before-show for user already logged in there, if its true, then i am navigating to the another view. But its not working, sometime the url changed to navigating url but the body of the content still remains. Initial the page loads freshly that time if we use data-before-show it throws this.pane is undefined error.

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

app.navigate error Cannot call method 'navigate' of undefined v2013.1.514

16 Answers, 1 is accepted