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

[Solved] app is not defined on app.navigate('somepage.html')

1 Answer 514 Views

Report a bug

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

This question is locked. New answers and comments are not allowed.

Pratik asked on 29 Sep 2014, 11:43 AM

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

<!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>

<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>

<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);

}());

1 Answer, 1 is accepted

answered on 01 Oct 2014, 04:13 PM

Hi Pratik,

The issues is caused by the fact that the app object is defined within a self-invoking function (also known as Immediately-Invoked Function Expression). The advantage of such an expression mostly lies in the fact that it allows you to encapsulate application logic to protect it from the global namespace. This is why the app object is only accessible within the scope of that function and trying to use it in the settings view implementation throws an 'undefined object' error.

If you want to expose the app variable globally, you would need to change the app.js implementation accordingly. For instance, you can move the app variable definition outside the function next to the _serviceUrl definition:

var _serviceUrl = "http://mobile.cmi-portal.co.uk/api/";

var app;

(function () {

...

}, false);

}());

or choose not to use a self-invoking function at all:

var _serviceUrl = "http://mobile.cmi-portal.co.uk/api/";

// 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);

I hope this information will help you move forward with your application development.

Regards,
Tina Stancheva
Telerik

Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.