app.navigate error Cannot call method 'navigate' of undefined v2013.1.514

17 posts, 1 answers
  1. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 25 Jun 2013 Link to this post

    My javascript code was working fine before I upgraded my kendo.mobile.js to v2013.1.514.

    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>

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 27 Jun 2013 Link to this post

    Hi Bill,

    This seems like one known issue. At what moment is the verifyLogin function called? 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 27 Jun 2013 Link to this post

    It's being called from my root (initial) view on init.

    <div id="rootView" data-role="view" data-init="verifyLogin"></div>
    function verifyLogin() {
        app.navigate(rootUrl + "/Mobile/Account/Login");
    }
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 28 Jun 2013 Link to this post

    Hello Bill,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 02 Jul 2013 Link to this post

    Petyo,

    Thanks for the suggestion, but that did not fix the issue.  Same error is thrown using the data-before-show event of the view.
  7. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 03 Jul 2013 Link to this post

    Hi,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 03 Jul 2013 Link to this post

    The latest internal build 2013.1.703 does allow for app navigation on the root view's before-show event.  So that item is fixed.

    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.
  9. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 04 Jul 2013 Link to this post

    Hi Bill,

    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.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 04 Jul 2013 Link to this post

    I'm using the Icenium simulator .  My application uses Cordova and the Barcode Scanner plugin.  I am also including the Kendo web css and javascript as some of your examples needed the web for the drop down form control (shown in mobile demos).  Both iOS and Android simulators have the issue.  I am using remote (partial) views from an ASP.NET MVC site.  verifylogin() of the rootView will check their login and either prompt or app.Navigate() into the main application.  I have dynamic URL logic so that I can toggle between development and production.  See below for my layout.  Hope this helps.

    <!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>
  11. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 08 Jul 2013 Link to this post

    Hi Bill,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 15 Jul 2013 Link to this post

    Petyo, I've finally got around to retesting this.  I am getting errors with 2013.1.703 using jQuery >= 1.9.1 (which is included in the download).

    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
  13. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 17 Jul 2013 Link to this post

    Hello Bill,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 17 Jul 2013 Link to this post

    Here's the test project.  Thanks for taking a look Petyo :)
  15. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 18 Jul 2013 Link to this post

    Hi Bill,

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Bill
    Bill avatar
    75 posts
    Member since:
    Feb 2013

    Posted 18 Jul 2013 Link to this post

    Thanks Petyo, I can confirm the latest build 2013.2.716 coupled with jQuery 1.9.1 have resolved many of my issues (including this one).
  17. Karthik
    Karthik avatar
    8 posts
    Member since:
    Sep 2013

    Posted 26 Sep 2013 Link to this post

    I am still getting this error "TypeError: this.pane is undefined" in kendo.mobile.min.js line 14 show in console chrome browser.  I am trying to the system once auth credential are verified its going to next view by using app.navigate().

    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.
  18. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 30 Sep 2013 Link to this post

    Hello Karthik,

    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.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready