Corsi on-line

Schedulare il reload di un DIV con jQuery

Un contenuto presentato da una Web application o da una pagina Internet potrebbe subire delle modifiche a causa di aggiornamenti in tempo reale, ciò accade in particolare quando una risorsa mette a disposizione dei dati o delle informazioni suscettibili di variazioni; semplici esempi di queste casistiche potrebbero essere i portali che propongono quotazioni finanziarie o risultati di manifestazioni sportive. Il framework jQuery potrebbe risultare utile per gestire tali eventualità consentendoci di schedulare il reload di una componente di pagina.

jQuery

Nello specifico verrà analizzato il caso del reload di un DIV sulla base di un intervallo di tempo predefinito dallo sviluppatore; la prima operazione da compiere sarà naturalmente quella di includere jQuery per poter avere accesso ai metodi necessari per la nostra piccola applicazione; ciò potrà essere fatto utilizzando una copia locale o un CDN (Content Delivery Network) come per esempio quello di Google o dello stesso jQuery Project:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Fatto questo (da notare l’utilizzo del plugin “migrate” per risolvere eventuali problemi di retrocompatibilità), si potrà passare alla fase relativa alla creazione di una semplice funzione:

<script>
var auto_refresh = setInterval(
function()
{
$('#miodiv').fadeOut('slow').load('index.php').fadeIn("slow");
}, 10000);
</script>

In tal modo il file “index.php” subirà un reload ogni 10 secondi (corrispondenti a 10 mila millisecondi) che porterà all’eventuale aggiornamento del contenuto delimitato dal DIV associato all’identificatore “#miodiv”, quest’ultimo potrà essere inserito in un qualsiasi punto della pagina dinamica destinato a produrre output:

<div id="miodiv">
</div>

Naturalmente il DIV potrà contenere informazioni di vario tipo, comprese quelle prelevate da una sorgente esterna all’applicazione, come per esempio una base di dati.

Per approfondire.

Post correlati
I più letti del mese
Tematiche