document.location not yet updated in route callback

4 posts, 0 answers
  1. Jack
    Jack avatar
    100 posts
    Member since:
    Jan 2007

    Posted 10 Jan 2014 Link to this post

    The problem
    I need to implement Google CSE when navigating the /search?q=query route.
    I navigate form the search input box to the search result page as follows:
    router.navigate('/search + '?q=' + encodeURIComponent($('#search-input').value()));
    I would like to implement my callback as follows:
    router.route('/search', function() {
      applicationLayout.showIn('#search-view', searchView);
      $('#search-results').html('<gcse:searchresults-only></gcse:searchresults-only>');
      var script = (document.location.protocol === 'https:' ? 'https:' : 'http:') +
           '//www.google.com/cse/cse.js?cx=003237445845897440411%3Atuurehzakfu';
      $.getScript(script);
    });
    The Google script parses document.location to find the q param and display the results.
    Unfortunately, at this stage (callback) the q param is not yet available in document.location.href.
    There is no event that triggers after document.location.href is updated and the only way to get it work is to replace router.nivigate by window.location.assign or to use setTimeout.

    How it should have been designed (IMHO)
    document.location.href should already have been updated with the new route when the route callback function is triggered otherwise router.navigate should be banned when using any api that analyzes the query string.

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 13 Jan 2014 Link to this post

    Hello Jacques,

    thank you for your feedback. The reason for this is because the routing callback may prevent the actual URL change by calling e.preventDefault(). Thus being said, you can use the hashchange/popstate DOM events, which are triggered after the URL has been updated. 

    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. Jack
    Jack avatar
    100 posts
    Member since:
    Jan 2007

    Posted 22 Jan 2014 Link to this post

    The workaround I use is window.location.assign instead of router.navigate (which I no more use).
    It is also consistent with links like "#/view" in anchors.
    In both cases the router change event is triggered after the address bar is updated.
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 23 Jan 2014 Link to this post

    Hi Jacques,

    Correct, this is also a solution. Simply put, this will work in exactly the same manner as the router handling of link elements clicks.

    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