Form Ajax “degradabili” con JQuery e JQuery.Form

La degradazione del codice è un po’ il mio cavallo di battaglia quando discuto con sviluppatori “ajax-centrici” che preferiscono puntare sull’effetto di un fade che sulla usabilità/accessibilità dell’applicazione anche su browser datati o con javascript bloccato (ie. cellulari).

La libreria JQuery si è, in più occasioni, dimostrata ottima per la gestione della degradabilità del codice ed uno degli esempi più interessanti di questa pratica è il plugin JQuery.Form.

Il plugin in questione infatti intercetta i normali form html e li ajax-izza automaticamente, permettendo inoltre di abilitare operazioni pre e post invio. Nel caso in cui, per qualche motivo, il motore js non dovesse funzionare allora la form, per nulla toccata dal plugin, continuerà a funzionare come nel sano, vecchio, web 1.0.

Vediamone un esempio di funzionamento partendo dal tutorial presente nel sito del plugin.

Innanzitutto inseriamo nell’head della pagina le chiamate a jquery ed al plugin, inoltre facciamo in modo che quest’ultimo sia abilitato solo alla fine del caricamento di tutta la pagina.
[code]

[/code]

Dopo di che creiamo la nostra form, che richiama un normale script php che fa qualche operazione, tra cui visualizzare i dati immessi e una nuova form.
[code]

[/code]

A questo punto, jquery.Form sarà già perfettamente funzionante e non dovrete modificare in nessun modo il vecchio codice php, a meno che non vogliate evitare, ad esempio, che lo script invocato non perda inutile tempo a rigenerare pagine e/o interrogare database in quanto non più visualizzate (un esempio classico è la lista di elementi cancellabili direttamente via ajax).

La soluzione è molto semplice, basta infatti iniettare un valore di controllo sovrascrivendo l’url dell’action e abilitare o disabilitare l’output dello script php in base alla presenza di quest’ultimo.

[code]

…

…

[/code]

Ovviamente il plugin non si limita a queste piccolezze, e vi consiglio di leggerne la documentazione (anche quella in linea) veramente molto completa.

ciuaz