How to implement an Ajax script?

[BobBlock]

This is a script that, when a link is clicked, will pull a page from somewhere and insert it in a div in the current page. Pretty simple, yes, but being the thick head I seem to be, I can't figure out how to implement it.

i.e. how to formulate the link so that it will point the script to the page we want to load in the div we want?

The script:

$(document).ready(function() {  

	// Check for hash value in URL  
	var hash = window.location.hash.substr(1);  
	var href = $('#nav li a').each(function(){  
		var href = $(this).attr('href');  
		if(hash==href.substr(0,href.length-5)){  
			var toLoad = hash+'.html #content';  
			$('#content').load(toLoad)  
		}   
	});  

	$('#nav li a').click(function(){  

	var toLoad = $(this).attr('href')+' #content';  
	$('#content').hide('fast',loadContent);  
	$('#load').remove();  
	$('#wrapper').append('<span id="load">LOADING...</span>');  
	$('#load').fadeIn('normal');  
	window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
	function loadContent() {  
		$('#content').load(toLoad,'',showNewContent())  
	}  
	function showNewContent() {  
		$('#content').show('normal',hideLoader());  
	}  
	function hideLoader() {  
		$('#load').fadeOut('normal');  
	}  
	return false;  

	});  
});

The instructions specify the following:

1. We want to target the links within the navigation menu and run a function when they are clicked:

$('#nav li a').click(function() {  
    // function here  
});

2. We need to define what page to get the data from when a link is clicked on:

var toLoad = $(this).attr('href')+' #content';

3. The loadContent function calls the requested page:

function loadContent() {  
    $('#content').load(toLoad,'',showNewContent)  
}

It's very likely that the above is all that's needed to run the script as intended but only if you know how to do it, which I don't.

I will be much obliged if the experts here care to give me a guiding hand.

PS: The tutorial all this comes from is here:

http://net.tutsplus.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

[acoder]

That should be all that's required. Can you post the HTML code for the page?

[BobBlock]

acoder,
Thank you for responding.

The HTML code for the page would be meaningless because there is as yet no link associated with the script in it.

The reason being I haven't been able to figure out how to construct such a link; I don't know what to include, in what form and order, etc.

Can you give me a working link example that will point the script to the page we want to load, in the div we want? I suspect that will put me on the right track.

Cheers!

[acoder]

The script is unobtrusive, i.e. it provides the effect, but if someone doesn't have JavaScript enabled, it will still work. There's nothing special about the links. They're just normal links. See the demo - check the source code.