Creare dei tab che gesticano contenuto reperito tramite AJAX è semplice con jQuery. Gran parte del lavoro viene gestito in automatico dal metodo $.ajax(). Invece, il metodo $.ajaxSetup() ci permette di impostare una sola volta tutti i parametri per le successive richieste AJAX. Infine, gli eventi ajaxStart e ajaxSuccess consentono di aggiungere degli effetti quando la richiesta inizia e quando termina, per esempio mostrando e nascondendo un indicatore di caricamento. Vediamo insieme i dettagli.
Partiamo da questa struttura di base:
<ul id="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div id="content">
<img src="ajax-loader.gif" alt="" id="loader" />
</div>
Per prima cosa dobbiamo creare uno script PHP che gestisca le richieste GET di ciascun tab. Ogni richiesta caricherà del contenuto differente. Useremo un parametro GET p con un valore progressivo:
header('Content-Type: text/html');
$page = $_GET['p'];
sleep(2);
if(!preg_match('/\d{1}/', $page)) {
echo 'Error: invalid parameter';
exit();
}
$page1 = 'Contenuto 1';
$page2 = 'Contenuto 2';
$page3 = 'Contenuto 3';
switch($page) {
case '1':
echo $page1;
break;
case '2':
echo $page2;
break;
case '3':
echo $page3;
break;
default:
break;
}
Ovviamente in un ambiente di produzione i contenuti delle tre variabili saranno presi da un database. Abbiamo usato la funzione sleep() in questo contesto per simulare il tempo di attesa prima della risposta del server.
Il codice jQuery si suddivide in tre parti:
- impostazioni generali delle richieste AJAX
- mostrare/nascondere l'indicatore animato quando una richiesta comincia o finisce
- reperimento dei contenuti AJAX
Ecco il codice:
$(document).ready(function() {
$.ajaxSetup({
cache: false,
url: 'jquery-ajax-tabs.php',
type: 'GET',
success: function(html) {
$('*', '#content').not('#loader').remove();
$(html).appendTo('#content');
}
});
$('#loader').ajaxStart(function() {
$(this).show();
});
$('#loader').ajaxSuccess(function() {
$(this).hide();
});
$('#tabs a').eq(0).click(function(e) {
$.ajax({
data: 'p=1'
});
e.preventDefault();
});
$('#tabs a').eq(1).click(function(e) {
$.ajax({
data: 'p=2'
});
e.preventDefault();
});
$('#tabs a').eq(2).click(function(e) {
$.ajax({
data: 'p=3'
});
e.preventDefault();
});
});
Come si può notare, tramite il metodo $.ajaxSetup() abbiamo anche impedito ai browser di mettere in cache i risultati utilizzando il valore false nell'opzione cache. ajaxStart e ajaxSuccess sono due listener: intercettano l'inizio e la fine di una richiesta AJAX ed eseguono un'azione nella loro funzione di callback.