Question

I would like to build a navigation which works and looks like on the CakePHP documentation page or google sites. What I mean by that:

1. The page navigation doesn’t issue any redirects
2. The fragment/hash
   (#) symbol is not visible in the URLs and the address bar

I understand I should use the fragment identifier to emulate the back button behaviour. I basically came up with a solution which covers the first point, simplified:

$.post("page", {urlId: hash}, function (data) {
  $("#content").html(data.content) // example
  // do some other stuff
}, "json");

However I am having difficulty with finding the solution for the second problem, which is my URLs look. I would like to use links which not contain the hash symbol. Now I have something like this:

http://example.com/#clients/john-doe

Which does not look like I want it:

http://example.com/clients/john-doe

I read somewhere that it is an URL translation task, not a jquery/javascript one.

Thank you for your answers.

EDIT: I don’t need to care for older browsers as the project I am developing is going to be used only internally and it was agreed that maintaining support for older browsers is a waste of time.

Answer 1

You can use the History API. But you will need to stick to hashes or regular links in older browsers.

There is an interesting project on github called History.js that should abstract away the different “APIs”.