Backbone.history: deep urls are not returning as expected in IE
In my single page basic application, I am having trouble getting my longer urls to route correctly in IE. Any URLs nested in multiple levels do not receive the proper fallbak hash when loaded directly.
The top level url works fine ...
when I load: domain.com/resource
in IE I get: domain.com/#resource (as expected)
Navigation (in app) works fine ...
when I click on a link to: domain.com/resource/12345
IE sends me to: domain.com/#resource/12345 (as expected)
but accessing deeper urls directly breaks the page
when I load: domain.com/resource/12345
in IE I get: domain.com/resource/12345 !! this is incorrect, and the page doesn't load
UPDATE:
This is IE9
source to share
I'm not sure if you have changed anything in your stage in the last 3 hours, but the problems I am seeing are related to this problem.
IE does not support relative paths in base element when linking to CSS files
When your page asks for http://stage.change4cancer.org/profile/647955793 it gets the actual html for the page. Now the question of whether it should redirect to # profile / 647955793 is another question (why you want to do this after you've already loaded the content, I'm not sure), but let me explain.
In this html from http://stage.change4cancer.org/profile/647955793 you have the following tag:
<base href="/" />
But IE9 won't respect this tag if it doesn't have the full URI. So all paths to JS, CSS, etc. Wrong. Instead
http://stage.change4cancer.org/js/libs/backbone-0.9.2.min.js
he asks
http://stage.change4cancer.org/profile/js/libs/backbone-0.9.2.min.js
Which actually returns another html page of some kind
Since none of your external JS is being loaded, of course things will go wrong.
source to share
try this:
Backbone.history.start({ pushState: Modernizr.history, silent: true });
if(!Modernizr.history) {
var rootLength = Backbone.history.options.root.length;
var fragment = window.location.pathname.substr(rootLength);
var search = window.location.search;
Backbone.history.navigate('/#' + fragment + search, { trigger: true });
} else {
Backbone.history.loadUrl(Backbone.history.getFragment())
}
source to share