Ajaxify a Website using the HTML4 HashChange Functionality

ajaxify-html4.js

(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

In reference to: https://github.com/balupton/History.js/wiki/Intelligent-State-Handling

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){
    .....

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^="/"]

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();

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