This is a migrated thread and some comments may be shown as answers.

document.location not yet updated in route callback

3 Answers 50 Views
SPA
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 10 Jan 2014, 06:50 PM
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.

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 13 Jan 2014, 08:21 AM
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!
0
Jack
Top achievements
Rank 1
answered on 22 Jan 2014, 04:33 PM
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.
0
Petyo
Telerik team
answered on 23 Jan 2014, 07:38 AM
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!
Tags
SPA
Asked by
Jack
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Jack
Top achievements
Rank 1
Share this question
or