Navigando vi sarà sicuramente capitato di incappare in una di quelle carine gif animate (rotelline, barre, ecc..), comunemente chiamate loader, che di solito sono utilizzate come feedback per mostrare all’utente che l’elaborazione dei dati richiesti è in corso. In questo post volevo fornirvi un piccolo esempio del loro uso congiunto con l’uso di ajax. Il materiale occorrente è:
- il framework ajax prototype disponibile a questo link.
- una piattaforma di sviluppo php (se usate windows io simpatizzo per wamp. L’uso di php nei file d’esempio e ridotto al solo uso della funzione sleep() per simulare una richiesta di dati al server. Eliminando la chiamata alla funzione, l’esempio può funzionare anche in assenza di un ambiente di svuluppo php)
- una gif animata per il loader in Ajax. (Sprovvisti? Niente paura, ajaxload.info offre un tool gratuito on-line per la sua generazione)
Di seguito i punti salienti del codice.
1.Premi il pulsante per eseguire una richiesta Ajax:
2.<input value="Click Here!" id="myButton" type="button" />
3.<script type="text/javascript">
4.function onButtonClick(e) {
5. var options = { method : 'get'
7. , onLoading : function(){$("loader").show();}
8. , onComplete : function(){$("loader").hide();}
9. }
10. new Ajax.Updater('change', 'listing.php', options);
11.}
12.$('myButton').observe('click', onButtonClick);
13.<script>
14.<div id="loader" style="text-align:center;display:none;">
15. <img id=vload"src="immagini/loader.gif">
16.</div>
17.<div id="change" style="text-align:center;"></div>
Come si nota, alla riga 12 aggiungiamo un observer, ovvero un osservatore di eventi, sul bottone di id “myButton”. Una volta che il pulsante viene premuto viene invocata la funzione onButtonClick la quale non fa altro che settare un array di opzioni e chiamare il metodo Ajax.Updater() (riga 10). Il metodo Ajax.Updater(), che viene utilizzato per aggiornare i contenuti di un elemento DOM, attraverso una chiamata Ajax aggiornerà il <div> di id “change” con il contenuto del file listing.php. Ma esaminiamo l’array delle options, nella fattispecie le righe 7 e 8 che sono alla base dell’effetto grafico che vogliamo creare. In queste righe, infatti, specifichiamo delle funzioni di callback che nel nostro caso non fanno altro che far apparire e scomparire il nostro loader animato. La funzione onLoading, invocata quando è in atto la chiamata Ajax, non fa altro che selezionare l’elemento DOM di id “loader“, contenente il nostro loader animato, e visualizzarlo. La funzione onComplete, invece, invocata a chiamata Ajax conclusa, non fa altro che nascondere l’elemento DOM di id “loader“ contenente il nostro loader animato. A voi i sorgenti completi:
