jQuery: Trasformare i link in chiamate ajax

Loading

Per prima cosa mi sento in dovere di scusarmi per la poca chiarezza del titolo, ma per ora non sono riuscito a fare di meglio, magari più avanti, pensandoci meglio mi verrà in mente qualcosa di più esauriente.
Per ora accontenitamoci.
Il risultato che vogliamo ottenere e quello di far caricare in file in “ajax-style” quando clicchiamo su un link, senza che il link venga aperto nell’attuale finsetra ricaricando la pagina da capo.

La prima cosa da fare è predisporre i link, per distinguerli dai link normali gli assegnamo una classe ad esempio ajaxLoad, un’altra cosa è che le pagine che colleghiamo non devono contenere i tag html, body, head ecc. ecc. ma solamente il codice html che vogliamo includere.

Link1
Link2
Link3
Link4

Qui abbiamo messo 4 link, ma in realtà non ci sono vincoli sul numero, basta assegnare la classe ajaxLoad per distinguerli.
Inoltre c’è un div con id loadSpace che sarà la porzione di sito dove appariranno le pagine caricate.
Ora veniamo al succosissimo codice jQuery:

$(document).ready(function(){
	$('a.ajaxLoad').click(function(){
		$url = $(this).attr('href');
		$('#loadSpace').load($url);
		return false;
	})
})

Il cuore di tutto è la riga return false; che impedisce al browser di seguire il link. Per il resto non facciamo altro che memorizzrein una variabile $url l’url da caricare:

$url = $(this).attr('href');

Per poi caricarla nel box loadSpace tramite il metodo load di jQuery.

$('#loadSpace').load($url);

Il codice jQuery poteva essere ulteriormente contratto se avessimo scritto:

$(document).ready(function(){
	$('a.ajaxLoad').click(function(){
		$('#loadSpace').load($(this).attr('href'));
		return false;
	})
})

Per quanto riguarda l’utilizzo di attr potete consultare il sito di jQuery.