Div Dinamico JQuery

In questo tutorial vedremo come realizzare un div dinamico jquery che si aggiorna automaticamente in un applicazione WEB è un’elemento davvero essenziale nella programmazione web 2.0, implementarlo in un architettura PHP-based che sfrutta JQuery è davvero molto semplice. Oggi vedremo in pochi semplici passi come realizzare ciò.
Supponendo che nella nostra applicazione lavori molto con AJAX e con le variabili di sessione o i cookie del PHP ($_SESSION o $_COOKIE), si potrebbe decidere di realizzare un div o una sezione della nostra pagina che varia dinamicamente al variare dei cookie o delle variabili di sessione.

div dianmico JQuery e Ajax.

Div dinamico con JQuery.


Per realizzare ciò basta definire una pagina .php che vogliamo esegua in background codice php che agisce sulle variabili di sessione o cookie che si settano mediante chiamate AJAX (potete dare un sguardo anche Chiamate AJAX in modalità GET per settare i cookie o le variabili di sessione mediante AJAX), supponiamo questa pagina si chiami “configurazione_div.php”.
A questo punto nella pagina principale basta definire un div o una sezione che vogliamo si aggiorni automaticamente,

<div id="id_dinamico"></div>

e incollare nel file .js incluso nella sezione head le seguenti righe di codice per rendere dinamica l’intera sezione della pagina (che sia un div, uno span,…):

setInterval(function() {
	      $("#id_dinamico").load("configurazione_div.php");
	}, 300);

è bene notare però che questa porzioni di codice si trovi all’interno dell’evento “ready” di JQuery:

$(document).ready(function(){
   ......
   setInterval(function() {
	      $("#id_dinamico").load("configurazione_div.php");
	}, 300
   );
   ......
});

in quanto eseguita senza sosta a cadenze di 300 millisecondi.
Ecco fatto niente altro di più semplice sta a voi poi definire il comportamento del div nella pagina “configurazione_div.php”.
Per avere un idea pratica di quanto scritto in quest’articolo pensate al sito di Ryanair che mano a mano selezioniamo un’opzione di configurazione del volo (es.assicurazione,bagagli,…) sulla destra viene modificato il carrello aggiungendo l’opzione appena selezionata, ciò concretamente serve per realizzare un sistema web del genere.

Div Dinamico JQuery ultima modidfica: 2014-01-29T14:37:10+01:00 da Gianluca Di Vincenzo
Posted in: PHP

By on 29 Gennaio 2014

Tagged: , , , , ,