Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

jQuery: Trasformare i link in chiamate ajax

Scritto da Fare-internet il 21 marzo 2012 condividi condividi

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.

<a href="ajax1.html" class="ajaxLoad">Link1</a>
<a href="ajax2.html" class="ajaxLoad">Link2</a>
<a href="ajax3.html" class="ajaxLoad">Link3</a>
<a href="ajax4.html" class="ajaxLoad">Link4</a>

<div id="loadSpace"></div>

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.

Twitter