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

2 posts, 0 answers
  1. Pratik
    Pratik avatar
    1 posts
    Member since:
    Mar 2013

    Posted 29 Sep 2014 Link to this post

    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>
     
        <!-- 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
     
    (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);
    }());



  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 01 Oct 2014 Link to this post

    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 app;
     
    (function () {
      ...
        }, false);
    }());

    or choose not to use a self-invoking function at all:
     
    // 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.

     
Back to Top