This question is locked. New answers and comments are not allowed.
I get this error : app is not defined when I am trying to navigate to a remote view.
I am trying to reuse the app object that is initialized when the application starts.
I also tried to reinitialize the app object by calling
var app = new kendo.mobile.Application();
When I do this, the page navigates, but the formatting seems to be broken. I have a list view in the remote view which should be filled with data via a web service call. But what happens is that the list view shows up inside the drawer and the main screen shows up blank.
I have also noticed that when I use an anchor tag with href="settings.html", the remote view opens up fine. It does not open when I try to navigate to it programmatically.
It works when I click on the settings link from the drawer menu, but does not work in app.navigate(). it also does not work when I try window.location.href="settings.html"
The required files are attached :
Index.html is the main drawer page.
Login.html is the initial view (configured in app.js).
Settings.html is the view I want to navigate programmatically after login.
-------------------------------------------------------------------------------------------------------------------------------------------
1. Index.html
-------------------------------------------------------------------------------------------------------------------------------------------
2. Login.html
-------------------------------------------------------------------------------------------------------------------------------------
3. Settings.html
----------------------------------------------------------------------------------------------------------------------
4. app.js
I am trying to reuse the app object that is initialized when the application starts.
I also tried to reinitialize the app object by calling
var app = new kendo.mobile.Application();
When I do this, the page navigates, but the formatting seems to be broken. I have a list view in the remote view which should be filled with data via a web service call. But what happens is that the list view shows up inside the drawer and the main screen shows up blank.
I have also noticed that when I use an anchor tag with href="settings.html", the remote view opens up fine. It does not open when I try to navigate to it programmatically.
It works when I click on the settings link from the drawer menu, but does not work in app.navigate(). it also does not work when I try window.location.href="settings.html"
The required files are attached :
Index.html is the main drawer page.
Login.html is the initial view (configured in app.js).
Settings.html is the view I want to navigate programmatically after login.
-------------------------------------------------------------------------------------------------------------------------------------------
1. Index.html
<!DOCTYPE html>
<
html
>
<
head
>
<
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/app.js"
></
script
>
</
head
>
<
body
>
<
div
data-role
=
"layout"
data-id
=
"main"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-role
=
"button"
href
=
"#appDrawer"
data-rel
=
"drawer"
data-align
=
"left"
data-icon
=
"drawer-button"
></
a
>
</
div
>
</
div
>
<!-- application views will be rendered here -->
</
div
>
<!-- application drawer and contents -->
<
div
data-role
=
"drawer"
id
=
"appDrawer"
style
=
"width: 270px"
data-title
=
"Navigation"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
div
>
<
ul
data-role
=
"listview"
>
<
li
>
<
a
href
=
"views/home.html"
>Home</
a
>
</
li
>
<
li
>
<
a
href
=
"views/settings.html"
>Settings</
a
>
</
li
>
<
li
>
<
a
href
=
"views/contacts.html"
>Contacts</
a
>
</
li
>
</
ul
>
</
div
>
</
body
>
</
html
>
-------------------------------------------------------------------------------------------------------------------------------------------
2. Login.html
<
div
data-role
=
"view"
data-title
=
"Login"
data-layout
=
"main"
>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
>
<
label
for
=
"username"
class
=
"required"
>User Name</
label
>
<
input
type
=
"text"
id
=
"txtUserName"
value
=
"dixit.pratiik@gmail.com"
name
=
"txtUserName"
class
=
"k-textbox k-invalid"
placeholder
=
"User Name"
required
=
""
style
=
"width: 200px;"
aria-invalid
=
"true"
>
<
br
>
<
li
>
<
label
for
=
"password"
class
=
"required"
>Password</
label
><
br
>
<
input
type
=
"password"
id
=
"txtPassword"
value
=
"CALLSIGN3"
name
=
"txtPassword"
class
=
"k-textbox k-invalid"
placeholder
=
"Password"
required
=
""
style
=
"width: 200px;"
aria-invalid
=
"true"
>
</
li
>
</
ul
>
<
a
type
=
"button"
data-role
=
"button"
id
=
"btnLogin"
data-click
=
"loginClick"
name
=
"btnLogin"
>Login</
a
>
<
script
>
function loginClick(e){
ToggleProgressBar($("#mainPage"),true);
var User = {
username:$('#txtUserName').val(),
userpassword:$('#txtPassword').val()
};
$.ajax({
url: _serviceUrl + 'Home/Login/',
type: 'POST',
data: JSON.stringify(User),
contentType: "application/json; charset=utf-8",
//dataType: 'json',
success:function(result) {
if (result != null) {
WriteCookie("DriverId",result.Id);
WriteCookie("DriverName",result.Name);
WriteCookie("DriverCalSign",result.DriverCalSign);
WriteCookie("DriverOrgId",result.Driver_Org_Id);
alert('successful login');
app.navigate('views/settings.html');
} else {
alert('Please enter correct username/password');
}
ToggleProgressBar($("#mainPage"), false);
},
error:function(result) {
ToggleProgressBar($("#mainPage"),false);
alert('There was a problem while logging in. Please try later');
}
});
}
</
script
>
</
div
>
-------------------------------------------------------------------------------------------------------------------------------------
3. Settings.html
<
div
data-role
=
"view"
data-title
=
"Settings"
data-layout
=
"main"
>
<
ul
id
=
"listview2"
>
</
ul
>
<
script
type
=
"text/javascript"
>
var _serviceUrl = "http://mobile.cmi-portal.co.uk/api/";
var id = '2FF5031A-C050-4BE3-AE7E-608AB15672B6';
var name = 'aditya';
var calsign = 'adi';
var orgid = '07BCC596-502E-4A7E-8A31-373DC8F3D8DD';
var Driver = {
Id:id,
Name:name,
DriverCalSign:calsign,
Driver_Org_Id:orgid
};
$.ajax({
url: _serviceUrl + 'Job/GetNewJob/',
type: 'POST',
data: JSON.stringify(Driver),
contentType: "application/json; charset=utf-8",
//dataType: 'json',
success:function(result) {
if (result != null) {
alert(result);
var output = '';
$.each(result, function(key, val) {
//output += '<
li
><
a
class
=
"JobClick"
href
=
"javascript:void(0);"
onclick
=
"showModal(this);"
data-jobnumber
=
"' + val.Job_Number + '"
>' + val.Job_Number + " - " + val.Job_Customer + '</
a
></
li
>';
output += '<
li
><
a
data-role
=
"button"
data-rel
=
"actionsheet"
href
=
"#Actions"
data-actionsheet-context
=
"' + val.Job_Number + '"
>' + val.Job_Customer + " - " + val.Job_Number + '</
a
></
li
>';
});
$('#listview2').append(output);
$('#listview2').kendoMobileListView();
} else {
}
},
error:function(result) {
alert('There was a problem while loading new jobs. Please try later');
ToggleProgressBar($("#mainPage"),true);
}
});
</
script
>
</
div
>
----------------------------------------------------------------------------------------------------------------------
4. app.js
var _serviceUrl = "http://mobile.cmi-portal.co.uk/api/";
(function () {
// store a reference to the application object that will be created
// later on so that we can use it if need be
var app;
// this function is called by Cordova when the application is loaded by the device
document.addEventListener('deviceready', function () {
// hide the splash screen as soon as the app is ready. otherwise
// Cordova will wait 5 very long seconds to do it for you.
navigator.splashscreen.hide();
app = new kendo.mobile.Application(document.body, {
// comment out the following line to get a UI which matches the look
// and feel of the operating system
skin: 'flat',
layout: 'main',
// the application needs to know which view to load first
initial: 'views/login.html'
});
}, false);
}());