Navigation via JavaScript

4 posts, 1 answers
  1. Scott Buchanan
    Scott Buchanan avatar
    38 posts
    Member since:
    Dec 2008

    Posted 16 Nov 2015 Link to this post

    Greetings!  I created a new app, using the "Kendo UI Drawer (JavaScript)" template.  I noticed that the views were in separate files (not how the app I worked on a year or so ago was laid out) so I followed this pattern.  The app is nearly completed and ready for publishing except for one issue - after I post a form to Everlive, I need to navigate back to the home view.

    app.js looks like this (some models removed for brevity): 

    (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;
          
        // create an object to store the models for each view
        window.APP = {
            models: {
                home: {
                        title: 'Home'
                },
                 evalSession: {
                        title: 'Session Evaluation',
                        ds: new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: "data/agenda.json",
                                    dataType: "json"
                                }
                            }
                        }),
                },
             }
        };
      
        // this function is called by Cordova when the application is loaded by the device
        document.addEventListener('deviceready', function () {
             navigator.splashscreen.hide();
      
            app = new kendo.mobile.Application(document.body, {
                          initial: 'views/home.html'});
          }, false);
    }());

     And, in views\evalSession.html, the code on the submit button contains this:

    data.create({
        'sessionName' : document.getElementById('sessionName').value,
        'sessionId' : document.getElementById('sessionId').value,
        'contentScore' : checkedContent,
        'knowledgeScore' : checkedSpeaker,
        'overallScore' : checkedSession,
        'wantMore' : checkedMore,
        'comments' : document.getElementById('comments').value
        },
        function(data){
            alert('Thank you!');
            //var app = new kendo.mobile.Application(document.body);
            app.navigate("views\home.html");
        },
        function(error){
            alert('Please try again, there was an error: ' + JSON.stringify(error));
        });       

    As posted here, there is an error that "app" is undefined.  This makes no sense to me as the first lines of app.js create the var app with a comment that specifically states "store a reference to the application object that will be created later on so that we can use it if need be".

    If I create a new app (commented out above), the page does navigate correctly, but subsequent use of the app is fragile - you might be able to navigate to another page or not - it quickly becomes non-responsive.

    Clearly, this is an issue of scope, and I wish my JavaScript experience matched my other language skills so I could recognize how to make a globally defined app variable.  What is the correct way to be able to navigate via JavaScript.  Please be specific (that is, take a moment to post a snippet of how to implement).  I found a few posts on blogs, SO, etc. about this but none offered a concrete solution.  Thanks!

    Scott

     

     

  2. Scott Buchanan
    Scott Buchanan avatar
    38 posts
    Member since:
    Dec 2008

    Posted 16 Nov 2015 Link to this post

    I have coded the navigation like this

    function(data){
        alert('Thank you!');
        var app = new kendo.mobile.Application($(document.body));
        app.navigate("views/home.html");
    },

    And it seems to be ok.  I still think this is creating another app and worry about how many can exist before the app becomes unstable.  How does this look?  Is there a better method?

    Thanks,
    Scott

     

     

  3. Answer
    Ventsislav Georgiev
    Admin
    Ventsislav Georgiev avatar
    17 posts

    Posted 19 Nov 2015 Link to this post

    Hello Scott,

    Thank you for contacting us.

    You are right, it is indeed an issue of scope. The app variable is local to the function scope it is declared in. If you need to use it in other scope you should attach it to the window object.

    I have edited your example code:
    app.js
    (function () {
        var app = {
            models: {
                home: {
                    title: 'Home'
                },
                evalSession: {
                    title: 'Session Evaluation',
                    ds: new kendo.data.DataSource({
                        transport: {
                            read: {
                                url: "data/agenda.json",
                                dataType: "json"
                            }
                        }
                    }),
                },
            }
        };
     
        document.addEventListener('deviceready', function () {
            navigator.splashscreen.hide();
     
            app.mobileApp = new kendo.mobile.Application(document.body, {
                initial: 'views/home.html'
            });
        }, false);
     
        window.APP = app;
    })();

    and your navigation would then be:
    function (data) {
        alert('Thank you!');
        window.APP.mobileApp.navigate("views\home.html");
    }

    Also, please note there shouldn't be more than one kendo.mobile.Application for the same document element (document.body) and it is generally only one in the whole mobile application. Having this in mind, we have plans for improving our templates in the future, so that it is easier for our clients to start a new project.

    In case you need any further assistance, don't hesitate to contact us.

    Regards,
    Ventsislav Georgiev
    Telerik
     

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

     
  4. Scott Buchanan
    Scott Buchanan avatar
    38 posts
    Member since:
    Dec 2008

    Posted 19 Nov 2015 in reply to Ventsislav Georgiev Link to this post

    Ventsislav,

    That is an awesome response - complete, accurate, and works!

    Thank you.
    Scott

Back to Top