Question

I want to create a site which in the menu will contain links, probably <a> which will send some real hrefs, like /contact/ /services/ etc, so that when google bot visits the site, it will index it as real subpages.

But when the user clicks those links in browser, I don’t want the browser to refresh and reload content, I want the jQuery to shoot and change the content in the proper div, but should probably also change the url somehow, so that user can copy this link to his friends too.

I can do the jQuery content change part, I just don’t know how to create those links so that they don’t refresh the browser when javascript is active, but work properly when javascript is off (google bot).

Answer 1

Read about manipulating history

history.pushState({foo: "bar"}, "page 2", "newpage.html");

First two arguments are not necessary (at least I haven’t seen any useful usage), and I use it exactly like stated below

<a href="/contact" class="ajax">Contact</a>

with javascript

$("body").delegate('.ajax', 'click', function(){
    $("#content").html('Loading new content...');
    history.pushState({foo: "bar"}, "dummy", $(this).attr('href'));
    $("#content").load($(this).attr('href')+'?ajax=1');
    return false;
});

However, the native browser’s back button is not supported. It means that when you hit back button, address changes to the old one but content stays the same. To workaround it, try to use following code

var popped = ('state' in window.history), initialURL = location.href;
$(window).bind('popstate', function(event) {
    // Ignore inital popstate that some browsers fire on page load  
    var initialPop = !popped && location.href == initialURL
    popped = true
    if ( initialPop ) return;
    $("#content").load(location.href+' #content');
    return false;
});

which will load old content as soon as user hits back button.

Also, you have to note that .pushState doesn’t work on outdated browsers and therefore you should create a fallback for users without this feature.

Eventually, as of jQuery 1.7, use .on() instead of .delegate(), because it’s faster and is being replaced. So instead of delegating whole body, we can use

$(".ajax").on('click', function(){
    $("#content").html('Loading new content...');
    history.pushState({foo: "bar"}, "dummy", $(this).attr('href'));
    $("#content").load($(this).attr('href')+'?ajax=1');
    return false;
});

which will attach event handler just to the specific elements.