4

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?

LonelyWebCrawler
  • 2,866
  • 4
  • 37
  • 57
  • This is probably a duplicate of http://stackoverflow.com/questions/6118693/how-can-i-change-the-page-url-without-refreshing-the-page – SpoonNZ Jan 10 '12 at 01:58

2 Answers2

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.

Community
  • 1
  • 1
SpoonNZ
  • 3,780
  • 1
  • 20
  • 25
  • You can use [History.js](https://github.com/balupton/History.js) for backwards compatibility. – bfavaretto Jan 10 '12 at 02:02
  • What do they mean by "Object or String"? – LonelyWebCrawler Jan 10 '12 at 02:04
  • You'll need to pass it something so you know what page to load when someone does hit "Back". I suggest "oldpage.html" might be a good start. You can then set up a popstate event listener to handle this. More at https://developer.mozilla.org/en/DOM/window.onpopstate (linked from my link above) – SpoonNZ Jan 10 '12 at 02:13
0

If you want the URL to change with each page load but want the header to stay the same, it may be worth just creating a template for the header and then changing the content section of each page.

If you are using something link PHP, this should be pretty simple with an include/require or similar.

Mercurybullet
  • 889
  • 1
  • 10
  • 20
  • 1
    Yes, but if I loaded a new page with the same header, the page would still go blank for a second, and then load the new site. I want the header to STAY THERE between page loads. – LonelyWebCrawler Jan 10 '12 at 02:29
  • 1
    In that case, you may be able to pull together something with anchors and `window.location.hash` -- Something along the lines of using ajax to replace the content and then using the hash `www.example.com/#/page1` as a lookup for the back button and bookmarking – Mercurybullet Jan 10 '12 at 02:39
  • the trick with these anchors is that you can change them without having to reload the page and see that flash of a blank page – Mercurybullet Jan 10 '12 at 02:41
  • I never thought of that! Thanks, I'll look into it. – LonelyWebCrawler Jan 10 '12 at 02:45