In my single-page backbone app, I'm having trouble getting my longer urls to route properly in IE. Any urls that are nested more than one level, don't receive the proper hash fallbak when loading them directly.
top-level urls work fine...
when I load: domain.com/resource
in IE I get: domain.com/#resource (as expected)
navigating (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
I'm not sure if you've changed anything on your staging in the last 3 hours, but the problems I'm observing are related to this problem
IE doesn't support relative paths in the base element when referencing CSS files
When your page requests http://stage.change4cancer.org/profile/647955793, it gets actual html for the page. Now whether or not it's supposed to redirect to #profile/647955793 is another matter (why you'd want to do that after you've already loaded the content, I'm not sure), but let me explain.
In that html from http://stage.change4cancer.org/profile/647955793 you have the following tag:
<base href="/" />
But IE9 will not respect that tag unless it has a full URI. Therefore, all the paths to the JS, CSS, etc are wrong. Instead of
http://stage.change4cancer.org/js/libs/backbone-0.9.2.min.js
it's requesting
http://stage.change4cancer.org/profile/js/libs/backbone-0.9.2.min.js
Which actually returns yet another html page of some sort
Since none of of your external JS is loading, of course things are going to go wrong.
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())
}
