Now, when I attempt to use the app object to navigate to a remote view, I get a javascript error "Cannot call method 'navigate' of undefined". I debugged the issue and found that the error is being thrown from kendo.mobile.js "this.pane.navigate(url, transition);" this.pane is undefined.
Is there anything I need to change to get this to work with the new version of kendo.mobile?
<
script
>
var isLoggedIn = false;
var app = new kendo.mobile.Application($(document.body), {
initial: "rootView"
});
function verifyLogin() {
app.navigate("http://192.168.1.129/Mobile/Account/Login");
}
</
script
>
16 Answers, 1 is accepted
This seems like one known issue. At what moment is the verifyLogin function called?
Regards,Petyo
Telerik
<
div
id
=
"rootView"
data-role
=
"view"
data-init
=
"verifyLogin"
></
div
>
function
verifyLogin() {
app.navigate(rootUrl +
"/Mobile/Account/Login"
);
}
This is the same issue - it is somewhat complicated problem related to the way the mobile application and its pane handles the initial view setting. We are still trying to figure out a solution for it. Meanwhile, a workaround I may suggest is to move the authentication logic in the beforeShow view event, which is designed for such purposes.
Regards,Petyo
Telerik
Thanks for the suggestion, but that did not fix the issue. Same error is thrown using the data-before-show event of the view.
I am sorry for misleading you. Meanwhile, we uploaded an internal build today, which includes a fix, which should resolve the problem. Calling navigate in the beforeShow handler should work as expected. Please give it a try.
Regards,Petyo
Telerik
However... the tabstrip is now broken. The tabstrip randomly disappears when a view is loaded. Most of the time views don't show the tabstrip, but sometimes it does show. I can't find a solid theory as to why this occurs.
Reverting back to 2012.3.1315.
I am sorry for the inconvenience. If possible, I would like to ask you for your assistance regarding the issue you describe, so that we can address it further. A similar report has been posted in our forums (see thread), however I did not manage to reproduce it. Do you use cordova too? Is there anything specific which might be needed for me to replicate the problem you describe?
Thank you in advance.
Petyo
Telerik
<!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
>
</
div
>
</
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
>
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
>
</
div
>
</
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
I reverted back down to jQuery 1.8.2 and I no longer get the errors below.
Uncaught TypeError: Cannot read property 'msie' of undefined kendo.all.min.js:17.
(anonymous function) kendo.all.min.js:17
(anonymous function) kendo.all.min.js:17
I am not sure what happens in this case (we have not received such reports, so far). The example I tested used jQuery 1.9, too. Can you isolate the problem in a sample project? We will take a look right away.
Regards,Petyo
Telerik
The problem seems to be specific for the internal build you are using (2012.3.1315). Replacing the reference with our Q2 official release seems to have resolved the problem.
Regards,Petyo
Telerik
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.
This issue does not seem to related to the current topic. This is why I would like you to open a separate support request regarding the problem that you are facing, so we can further investigate.
Thank you very much for your cooperation.
Kiril Nikolov
Telerik