Router routeMissing problem

4 posts, 0 answers
  1. Marcel
    Marcel avatar
    36 posts
    Member since:
    Apr 2011

    Posted 09 Aug 2013 Link to this post

    Hello,

    In my SPA (not mobile) application i'm using the Kendo Router for navigation within the application.
    The Router works perfect except for 1 problem i'm running into.
    When someone navigates to an invalid route it's caught through the routeMissing method to prevent navigating to invalid routes.
    So navigating from http://mysite/#/myView to http://mysite/#/myViewtest results in the routeMissing being called and the navigation is prevented.
    However, the browsers address bar shows the address which was navigated to (http://mysite/#/myViewtest).
    If the user hits the browsers refresh button after that the application starts again and tries to navigate to the wrong address, which now results in a blank page.
    Trying to navigate back to the old route in the routeMissing method doesn't work, since it didn't acually change for the router (defaultPrevented).

    Is there any way to navigate to the old route or update the address bar with the old route ?

    Thanks in advance.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Aug 2013 Link to this post

    Hi Marcel,

    are you calling the preventDefault method of the event parameter? This approach should work in general. If possible, can you please provide an example of this misbehavior? We will take a look. 

    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. Marcel
    Marcel avatar
    36 posts
    Member since:
    Apr 2011

    Posted 12 Aug 2013 Link to this post

    Hi Petyo,

    I tried using the e.preventDefault(), but without success.

    (function ($, CIX, kendo) {
        /// <summary>Applicatie Class</summary>
        CIX.Application = function (options) {
             
            var _router = new kendo.Router({ change: function (e) { _routeChanged(e); }, routeMissing: function (e) { _invalidRoute(e); } });
     
            var _invalidRoute = function (e) {
                e.preventDefault();
                _toastr.error("invalid address (" + e.url + ")");
            }       
        }
    }

    After typing an invalid url in the addressbar the routeMissing (_invalidRoute) method gets called but the url in the addressbar doesn't change back.
    I solved it in a different way to update the addressbar back to the old url.

    (function ($, CIX, kendo) {
        /// <summary>Applicatie Class</summary>
        CIX.Application = function (options) {
     
            var _router = new kendo.Router({ change: function (e) { _routeChanged(e); }, routeMissing: function (e) { _invalidRoute(e); } });
     
            var _invalidRoute = function (e) {
                _toastr.error("invalid address (" + e.url + ")");
                var currentHash = location.hash;           
                var newHash = "#" + _currentUrl;
                var oldUrl = window.location.href.replace(currentHash, newHash);
                window.location = oldUrl;
            }
     
        }
    }
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 Aug 2013 Link to this post

    Hello Marcel,

    this behavior does not seem right, but I could not reproduce it, so I would like to ask you for your assistance, if possible. I made an empty page with the following snippet:

    <script>
          var router = new kendo.Router({
              routeMissing: function(e) {
                console.log(e);
                if (e.url == "/foo") {
                    e.preventDefault();
                }
              }
          });
     
          router.start();
      </script>

    then I manually added #/foo to the end of the url. The url was reverted to the previous one. I used Google Chrome 28 for my tests. Can you please try the same on your side? Perhaps I am missing something. 

    Regards,
    Petyo
    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