32

OK, this what I'm trying to do (I think Google mostly does this as well) :

Scenario A :

In page /Main_Page let's say there are 3 sections. When user clicks on section A "link", section A's content is loaded through AJAX and embedded into the page.

Scenario B :

When /Main_Page/Section_A is loaded, we practically go to the very same page (as in scenario A) - /Main_Page and load Section A via AJAX - as before.

The problem :

We've got 2 identical resulting pages, but the URL is different (in the first case it'll be just /Main_Page, while in the second it will be /Main_Page/Section_A).

What I want to do :

  • In Scenario A, after loading Section A via AJAX, how should I do it so that the appearing URL (in the browser address bar) is /Main_Page/Section_A (or anything else for that matter), without any sort of redirecting, page reloading, etc?
Adi
  • 5,089
  • 6
  • 33
  • 47
Dr.Kameleon
  • 22,532
  • 20
  • 115
  • 223
  • 6
    You're looking for [History API](http://diveintohtml5.info/history.html), here's a [demo](http://html5demos.com/history/) – Adi Aug 13 '12 at 10:55
  • 1
    Maybe you are looking for hash tags in URLs (like https://twitter.com/#!/search-home). Google has a nice tutorial how to crawl these pages: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992 – Tim Aug 13 '12 at 10:57

2 Answers2

55

Your problem can be solved by implementing the History API, especially by using the pushState() method. I recommend reading about it in MDN. There's also an all-in-one solution called History.js, it will help you implement it x-browser easily (It will fallback to URL hashes # if the browser doesn't support it).

Here's an example:

history.pushState('', 'New Page Title', newHREF);

Not excited enough? Here's a demo that will encourage you to implement it.

Adi
  • 5,089
  • 6
  • 33
  • 47
  • This definitely seems promising; I've already started studying it and it's most likely what I'll be using (the `history.js` approach seems more `viable` to get it working fast). Thanks a lot, buddy! :-) – Dr.Kameleon Aug 13 '12 at 11:06
  • As a follow-up, just to let you know : It's working brilliantly! :-) – Dr.Kameleon Aug 13 '12 at 11:18
  • @Jleagle True. But the example given regarding `history.js` works like a charm - so, basically no need for any other example. ;-) – Dr.Kameleon Aug 13 '12 at 11:20
  • @Jleagle, you're right :) Thanks for letting me know, I've updated the link with a different one. – Adi Aug 13 '12 at 11:28
  • @Dr.Kameleon, thanks for the follow-up. It's very nice to see question posters like you. Clear question, appreciation (not necessarily upvote/accept), follow-up. – Adi Aug 13 '12 at 11:30
  • @Adnan I'm a frequent answerer myself (and in love with coding, as much as one could be), so I do know what you mean : this whole interaction is one of the things I adore about StackOverflow, making it one of the most valuable communities/resources for programmmers. Cheers! – Dr.Kameleon Aug 13 '12 at 12:03
  • Does this thing work on IE? – Michal Pasinski Oct 10 '13 at 09:18
  • @user1200125 History API isn't supported by IE until IE10. History.js, however, seamlessly reverts to the old `onhashchange`. – Adi Oct 10 '13 at 09:29
  • Tell me how you did that stuff with the smiley in your profile XD – BoJack Horseman Feb 06 '14 at 15:51
9

I just found a tutorial and it worked for me,

$('a').click(function(){
var value = $(this).attr('id');
window.location.hash = value; // it appends id to url without refresh
});


$(window).bind('hashchange' function() {
    var newhash = window.location.hash.substring(1) // it gets id of clicked element
    // use load function of jquery to do the necessary...
});

i got the above code from http://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/

Pavan Mehta
  • 314
  • 2
  • 5