Load links with AJAX?

[Darkwater]

Many sites have links which load content with AJAX. Okay, easy. I know how to do that. No big deal. However, I have seen some sites (like [URL="http://www.gizmodo.com/"]Gizmodo[/URL]) which do this in a different way. It really behaves like a link, loading another page with changing the URL and stuff, but it actually loads content with AJAX, thus actually staying on the same page.

I know it's a little hard to explain, but I hope you get it.

Question: How can I do that?

[aerochug]

The history.pushState() method can be used to change the URL without actually loading another page.

See this for more information: [url]https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history[/url]

Note that this hasn't been implemented fully across all browsers, so in that case you'll want to change location.hash so that there is back button and bookmarking support. Of course, this option is not as powerful as history.pushState().

[t3hprogrammer]

History.js is a pretty good cross-browser solution for now.

[url]https://github.com/balupton/History.js/[/url]

[swift and shift]

Don't do this unless you have a [i]really[/i] good reason

[aerochug]

[QUOTE=swift and shift;34338648]Don't do this unless you have a [i]really[/i] good reason[/QUOTE]

What about the #something at the end of the URL? It's perfectly fine to use that if you want back button support.

[swift and shift]

[QUOTE=aerochug;34339370]What about the #something at the end of the URL? It's perfectly fine to use that if you want back button support.[/QUOTE]

no don't do that either

[aerochug]

[QUOTE=swift and shift;34339399]no don't do that either[/QUOTE]

Why not? I'm curious to know since I've been doing it that way.

[TerabyteS_]

[QUOTE=aerochug;34339614]Why not? I'm curious to know since I've been doing it that way.[/QUOTE]

It's not good because if one of your user ever gives such a link to another user with Javascript disabled they wouldn't be able to display the page.

[jaybuz]

Most people have javascript enabled anyway and if they don't they'll still see the home page.

[Fate]

If you're using jQuery it's easy to use combined with AJAX.
Basically

$.get(url, callback(){
//work with data
});

[reeferdk]

[QUOTE=TerabyteS_;34339673]It's not good because if one of your user ever gives such a link to another user with Javascript disabled they wouldn't be able to display the page.[/QUOTE]

Is that really a viable argument in 2012?

Also, how else would you make a linkable locationbar on a page updated with XHR (That works cross-browser that is) ?

I agree that history.pushState() is the best option, if its availible..

[swift and shift]

[QUOTE=reeferdk;34428092]Is that really a viable argument in 2012?[/QUOTE]

yes. I'm sick and tired of websites using Javascript to look fancy without serving any purpose at all and just hogging my cpu and making the page unresponsive

[editline]28th January 2012[/editline]

If your website works without Javascript, then that means you're probably doing things properly and only using JS to add extra niceness, not shitty effects

[Darkwater]

[QUOTE=swift and shift;34428354]...and just hogging my cpu and making the page unresponsive[/QUOTE]

You would need a really crappy PC to not being able to run a few JS scripts..

[jaybuz]

[QUOTE=Darkwater124;34433643]You would need a really crappy PC to not being able to run a few JS scripts..[/QUOTE]

JavaScript animation is actually quite laggy on my MacBook. I would think it would be fine on a Pro though.

[Ortzinator]

[url]http://isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs[/url]

Gawker is a disaster. Please don't make your site like that.

[reeferdk]

[QUOTE=swift and shift;34428354]yes. I'm sick and tired of websites using Javascript to look fancy without serving any purpose at all and just hogging my cpu and making the page unresponsive

[editline]28th January 2012[/editline]

If your website works without Javascript, then that means you're probably doing things properly and only using JS to add extra niceness, not shitty effects[/QUOTE]

I agree with you to some extend, and i always aim to make my stuff as unobtrosive as possible, but when it comes to this particular issue, you will still have to use location hash when history.pushState is unavailible..

Also somethings is just easier if your specs isnt aiming for totally unobtrosive scripting (Like custom UI elements)

[jaybuz]

I built [url]http://speedwaymotorcycles.co.uk[/url] with, I guess you could say obtrusive AJAX but it works fine without JavaScript enabled. I basically run through all the links on the page with a replacement function. That way the links are only Ajax links if JavaScript is enabled.

I really should find a way to add support for pushHistory state... effort.

[reeferdk]

I usually just specify wether the link should open in a modal popup, or change the content space or just act like a normal link with classes on the links:

<a href="popup.php" class="modalPopup">open popup</a>
<a href="content.php" class="changeContent">load article or whatever</a>

then i use jquery's live() to enable javascript that makes sure that the link opens in a modal or whatever. This javascript then loads the content, changes hash, puts the contnt in whatever container and stops propagation on the link click.. that way things will work regardless of there being javascript present or not too