Question

On my site, I would like to implement AJAX page loading, as seen on Facebook, Twitter, and the comparatively smaller site Kotaku Gaming.

Basically, this is what I want to do: have a header that remains static throughout all pages on the domain, and only load content into a specific container, using AJAX and jQuery.

jQuery’s $.load() is almost perfect— but only almost. This is basically the code I’d use:

$("#content").load("site.html");

However, when another page is “loaded” with this function, the URL does not change. This will ruin bookmarking as well as linking, and is therefore unacceptable. The URL needs to change.

The problem with $.get() is that the header does change along with the rest of the page, which of course is not what I’m looking for.

Can anybody please help me accomplish this? If the sites mentioned above can do it, why can’t I?

Answer 1

The first answer on How can I change the page URL without refreshing the page? should do the trick for you – using pushstate to push the new address. Note this won’t work in older browsers, I’d suggest the best theory is to fall back to traditional methods then.