JavaScript  »  Articoli  »  JQuery 

Grazie a JQuery è possibile configurare questi comportamenti solo una volta per tutta l'applicazione delegando la loro invocazione al framework:

todo.ajax = {
	events : {
		onStartLoading : function() {
			if(todo.ajax.status.concurrentConnections==0) {
				todo.ajax.status.isLoading = true;   
				$('img#loadImg').css({display:'block'});										
			}
			todo.ajax.status.concurrentConnections++;	         
			
		},
		onStopLoading : function() {
			todo.ajax.status.concurrentConnections--;	 
			if(todo.ajax.status.concurrentConnections==0) {
				todo.ajax.status.isLoading = false;   
				$('img#loadImg').css({display:'none'});										
			}
		},
		onError : function(xhr, status, error) {
			isLoading = false;  
			todo.ajax.status.concurrentConnections--;
			alert("ERROR:\nstatus: "+status+"\nerror: "+error);
		}
	},
	status : {
		concurrentConnections : 0,
		isLoading : false
	}
}

Nonostante i metodi possano sembrare complessi, analizzandoli bene si capisce che semplicemente si occupano di mostrare (o nascondere) l'immagine con id="loadImg" tramite un comodo selettore JQuery e le funzioni per la manipolazione del CSS in base al numero di connessioni avviate in quel momento, salvando in due variabili lo stato attuale delle cose (todo.ajax.status.concurrentConnections come intero e todo.ajax.status.isLoading come booleano). Questo perché c'è la possibilità che esistano contemporaneamente più connessioni avviate con il server e ovviamente il messaggio di caricamento deve interrompersi solamente quando tutte le connessioni sono state chiuse.

Un discorso a parte lo merita la funzione todo.ajax.events.onError(), invocata in caso di problemi di connessione con il server, che oltre a stampare la stringa ERROR mostra anche alcune variabili di debug interne a JQuery. Una volta impostate queste funzioni non ci dovremo più preoccupare della gestione delle connessioni Ajax in quanto sarà JQuery ad occuparsi di tutto in maniera trasparente.

L'inizializzazione vera a propria della pagina HTML avviene grazie alla funzione todo.dom.init().

todo.dom = {
	init : function() {
		var elems = new Array();
		var li = $("<li class='general selected'>Homepage</li>");
		li.click(todo.controller.getHomepage);
		var ul = $("<ul id='tabs'></ul>");
		ul.append(li);
		var cont = $("div#container")
		cont.append( ul );
		cont.append( $("<br style='clear:both'>") );
		cont.append( $("<div id='content'></div>") );
		$("body").append("<img src='opt/load.gif' id='loadImg'/>" );
	} 
}

La funzione costruisce una lista di item (gestiti come tab grazie ai CSS) inserendo come unico item, per il momento, il collegamento alla pagina iniziale associando come callback dell'evento onclick la funzione todo.controller.getHomepage() (che vedremo successivamente). Oltre alla lista definisce un div con id="content" utilizzato come container per le diverse pagine e l'immagine loadImg che, posizionata assolutamente nei CSS, si occupa di migliorare la user experience nei momenti di comunicazione tra il client e il server. Per la costruzione delle componenti DOM viene utilizzata sempre la funzione helper $() che si occupa di inizializzare il DOM a partire da una stringa HTML.

Viene utilizzato un metodo personalizzato invece del semplice append() esposto da JQuery perché questa versione accetta anche altri parametri come un vettore di elementi da appendere e un booleano che indica se eliminare o meno il vecchio contenuto del nodo padre.

Altri articoli

Altre guide

Altre newsletter