Jquery Update Browser Location, Don't Redirect

Question

I'm building a series of basic accordions for a project.

We want them to have static, linkable pages. So we've created invidividual pages for each of the open states as well.

For example,

/whoweare is the main slider.

But we have a sub slider located at /whoweare/whatwedo

What I'm looking to have done is, when a user clicks a header on /whoweare, the slider opens, and the url bar updates to /whoweare/whatwedo, but there is no actual redirect. The url location should simply change, nothing more.

I've tried using

window.location.replace($(this).attr('href'));
return false;

But that doesn't seem to have accomplished what I wanted, it still reloads onto a new page.

Any other suggestions?

Answer 1

You cannot change the URL without redirecting - it'd be a phishing nightmare (changing URL to that of a bank while staying on the phishing site, for example).

You can only manipulate the document hash - i.e. http://domain.com/#identifier - which is how Google, Facebook, etc. provide AJAX sites with browser history support.

Exact duplicate of #352343 Changing browser’s address bar without refreshing.

update: HTML5 now allows pushState, but only within the same domain.

Answer 2

Check out the Ben Alman's jQuery bbq plugin

$.bbq.pushState() - http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/