Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ajaxify a Website using the HTML4 HashChange Functionality
(function(window,undefined){
// Prepare our Variables
var
document = window.document,
$ = window.jQuery;
// Wait for Document
$(window).bind(function(){
// Prepare Variables
var
$content = $('#content'),
$body = $(document.body),
rootUrl = document.location.protocol+'//'+(document.location.hostname||document.location.host);
// Ajaxify our Internal Links
$.fn.ajaxify = function(){
// Ajaxify internal links
$(this).find('a[href^="/"],a[href^="'+rootUrl+'"]').unbind('click').bind('click',function(event){
var $this = $(this), url = $this.attr('href'), title = $this.attr('title')||null, relativeUrl = $(this).attr('href').replace(rootUrl,'');
document.location.hash = relativeUrl;
event.preventDefault();
return false;
});
// Chain
return this;
};
// Ajaxify Page
$body.ajaxify();
// Hook into State Changes
$(window).bind('hashchange',function(){
// Prepare
var
relativeUrl = '/'+document.location.hash.replace(/^\//,''),
fullUrl = rootUrl+relativeUrl;
// Set Loading
$body.addClass('loading');
// Start Fade Out
$content.fadeOut(800);
// Ajax Request the Traditional Page
$.get(url,function(data){
// Find the content in the page's html, and apply it to our current page's content
$content.stop(true,true).show();
$content.html($(data).find('#content')).ajaxify();
if ( $content.ScrollTo||false ) $content.ScrollTo(); // http://balupton.com/projects/jquery-scrollto
$body.removeClass('loading');
// Inform Google Analytics of the change
if ( typeof pageTracker !== 'undefined' ) {
pageTracker._trackPageview(relativeUrl);
}
}); // end get
}); // end onStateChange
}); // end onDomLoad
})(window); // end closure
@balupton

This comment has been minimized.

Copy link
Owner Author

commented Mar 7, 2011

@yemster

This comment has been minimized.

Copy link

commented Jan 19, 2012

Great work Benjamin - its been incredibly useful.

In case its useful to someone else, 2 generic changes I had to make to the gist:

On line #38: should also strip out leading # from the location.hash as it's not passed to the server resulting in an incomplete url being sent

so

relativeUrl = '/'+document.location.hash.replace(/^\//,'')

becomes

relativeUrl = '/'+document.location.hash.replace(/^\//,'').replace(/^#/,'')

and a typo on line #48: the ajax request should be using fullUrl instead of url so it becomes

// Ajax Request the Traditional Page 
  $.get(fullUrl,function(data){
    .....
@jethrolarson

This comment has been minimized.

Copy link

commented May 23, 2012

You don't need to wrap this with $ in jQuery plugins, this is already the jQuery collection.

$(this).find('a[href^="/"]...

Can be

this.find('a[href^="/"]
@zhkzyth

This comment has been minimized.

Copy link

commented Oct 24, 2012

well , i don't know why the $.fn.find doesn't work for me . i use the jQuery JavaScript Library v1.6.1

$content.html($(data).find('#content')).ajaxify();

i try to use $.fn.filter() and it works.hope to help someone...

$content.html($(data).filter('#content')).ajaxify();
@cjramki

This comment has been minimized.

Copy link

commented Nov 14, 2013

how to use this plugin to browser back button.
http://stackoverflow.com/questions/19951004/solution-for-browser-back-button-tracking?noredirect=1#comment29700977_19951004
could please help me to solve this issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.