jQuery Mobile: Il submit di un form
Dopo avere visto, nel precedente articolo di questa serie, la gestione dei form dal punto di vista “stilistico”, in questo tutorial vedremo un’applicazione pratica. Ci si potrebbe domandare che bisogno c’é. Ebbene jQuery Mobile, oltre a gestire il layout del nostro form, gestisce anche l’implementazione del submit tramite chiamata asincrona. Vuoi scoprire come?
Preparazione della pagina
Lo scenario di questo tutorial sarà quello dell’iscrizione ad una newsletter. Avremo di conseguenza un semplicissimo form che richiede nome ed email come in questo esempio.
La visualizzazione corretta, su un dispositivo mobile é questa:
Iniziamo a creare la pagina index.html ed a dichiarare l’header con le inclusioni delle librerie necessarie così come abbiamo visto nei precedenti articoli.
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
Ora passiamo al body ed iniziamo a dichiarare l’header del documento con al suo interno il titolo (newsletter).
<div data-role="page" id="newsletter">
<div data-role="header">
<h1>Newsletter</h1>
</div>
Ed ora, iniziamo a dichiarare il form ed a inserire i campi nome ed email (per quest’ultimo campo utilizzeremo il type email come abbiamo già visto).
<div data-role="content">
<form action="subscribe.php" method="get" name="form" id="form">
<fieldset>
<div data-role="fieldcontain">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
</div>
Ora, come puoi vedere, nell’esempio i due pulsanti (invia e cancella) sono allineati orizzontalmente; a questo punto devo fare un piccolo inciso.
Gestione delle colonne con jQuery Mobile
jQuery Mobile offre un supporto per i layout a colonne multiple veramente semplice da utilizzare; vediamo come.
Innanzi tutto é necessario dichiarare un contenitore, tipicamente un div, al quale assegnare la classe ui-grid-?
Al posto del punto di domanda scriveremo:
- a se vogliamo due colonne (50%)
- b per tre colonne (33%)
- c per quattro colonne (25%)
- d per cinque colonne (20%)
All’interno di questo contenitore potremo dichiarare gli elementi che rappresentano le colonne assegnandogli la classe ui-block-? . Sostituiremo il punto di domanda con le lettere dell’alfabeto a partire da a per arrivare fino a quanto é necessario.
Facciamo subito un esempio per chiarire.
Immaginiamo di volere un layout su tre colonne. Dovremo dichiarare un contenitore con classe ui-grid-b ed al suo interno dichiareremo le colonne. In questo modo:
<div data-role="page">
<div data-role="content">
<div class="ui-grid-b">
<div class="ui-block-a">
Blocco 1
</div>
<div class="ui-block-b">
Blocco 2
</div>
<div class="ui-block-c">
Blocco 3
</div>
</div>
</div>
</div>
Ottenendo questo risultato:
Ora applichiamo quanto abbiamo visto per allineare i due pulsanti del nostro form. Questa volta utilizzeremo la classe ui-grid-a in quanto ci servono due colonne.
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="submit" value="invia" data-theme="b"/>
</div>
<div class="ui-block-b">
<input type="reset" value="cancella" />
</div>
</div>
Come vedi al pulsante invia abbiamo attribuito data-theme=b. In questo modo avrà un aspetto diverso dall’altro pulsante.
Ed ecco index.html completo:
<!DOCTYPE html>
<html>
<head>
<title>jQueryMoblie</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page" id="newsletter">
<div data-role="header">
<h1>Newsletter</h1>
</div>
<div data-role="content">
<form action="subscribe.php" method="get" name="form" id="form">
<fieldset>
<div data-role="fieldcontain">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="email" name="email" id="email" />
</div>
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="submit" value="invia" data-theme="b"/>
</div>
<div class="ui-block-b">
<input type="reset" value="cancella" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</body>
</html>
La gestione del submit
Ora, cosa succede premendo il pulsante invia?
- jQuery Mobile serializza i dati del form.
- Li invia tramite chiamata ajax alla pagina indicata nell’attributo action (subscribe.php) del form tramite il metodo specificato nell’attributo method (get).
- Il risultato verrà inserito nella nostra pagina index.html come nuova pagina interna che a sua volta verrà immediatamente visualizzata.
Senza dover scrivere una riga di codice!
La pagina lato server
Scriviamo dunque la pagina subscribe.php. Nella realtà dovrà inserire i dati (nome ed email) nel database. Noi ci accontenteremo di visualizzare questi dati in modo da testimoniare il loro effettivo passaggio.
<div data-role="page" id="subscribe">
<div data-role="header">
<h1>Grazie!</h1>
</div>
<div data-role="content">
<h2>Grazie <?php echo $_GET['nome']; ?> per esserti iscritto.</h2>
Riceverai la nostra newsletter all'indirizzo <?php echo $_GET['email']; ?>
</div>
</div>
Chiaramente non é necessario includere le varie librerie in quanto questo codice verrà iniettato direttamente nella pagina index.html.
Eliminare il bottone back
jQuery Mobile, come abbiamo visto, aggiunge automaticamente il bottone back alle pagine.
Nel nostro caso però non ha molto senso. Infatti dopo essersi iscritto alla newsletter, l’utente non ha nessuna necessità di ritornare al form.
Per fare questo basterà semplicemente inserire nella dichiarazione dell’header data-backbtn=”false”, in questo modo:
<div data-role="header" data-backbtn="false">
<h1>Grazie!</h1>
</div>
Ed ora aggiungiamo un bottone personalizzato (come abbiamo visto nel primo articolo) in modo da indirizzare l’utente ad esempio alla home page.
<div data-role="header" data-backbtn="false">
<h1>Grazie!</h1>
<a href="#" data-icon="home" class="ui-btn-right">home</a>
</div>
Conclusione
Ancora una volta abbiamo potuto toccare con mano la grande efficienza di jQuery Mobile.
Il contenuto di un form inviato in ajax senza nemmeno dover scrivere una riga di codice.
Ho come l’impressione che andrà a finire che utilizzeremo jQuery Mobile anche per sviluppare siti tradizionali.
Un unico consiglio: non utilizzarlo troppo o corri il rischio che ti si atrofizzi il cervello!
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
21 commenti
Trackback e pingback
-
Raccolta di articoli della settimana 20-26/06/2011 | Saverio Gravagnola
[...] Submit di form con jQuery Mobile (Your Inspiration Web) [...] -
Raccolta di articoli della settimana 26/06/2011 | Saverio Gravagnola
[...] Submit di form con jQuery Mobile (Your Inspiration Web) [...]
Ciao Maurizio,
ottima guida, come sempre!
Ti segnalo che gli esempi si son mangiati i vari attributi data-x
Porca miseria, si é mangiato anche l’indentazione. Stasera correggo
Ecco ho corretto
Fantastico, non c’è bisogno di scrivere una riga di codice :)
Una volta finita questa guida a jQuery Mobile, mi stampo tutti gli articoli e me li tengo sulla scrivania ;)
Ciao Tiziano. La guida é finita.
Da due giorni uscita la beta1. C’é qualche piccolo cambiamento da considerare ma l’importante era capire il funzionamento in generale
No peccato! Altre guide sarebbero graditissime; non solo perchè sei forse l’unico che ha affrontato tutorial di Jquery Mobile in Italiano, ma anche perchè l’hai fatto in modo semplice ed esaustivo, insomma non il solito copia e incolla di informazioni che si trova sugli altri siti!
Continua così, complimenti!
CIao
Gabriele
Ciao Gabriele e grazie per i complimenti.
Per il momento non ho previsto altre guide; ho iniziato che jQuery Mobile era in alpha, ora é in beta e già sono cambiate un po’ di cose. Quando ci sarà la prima versione stabile, ci torneremo sopra.
Ciao maurizio, e se volessi spedire il contenuto dei campi ad una specifica email? posso usare un form action=”mailto:indirizzo” method=”post” enctype=”text/plain ?
l’unica cosa rimarrebbe renderlo un attimino sicuro tipo evitare spam o bots..magari rendendo necessario un click o slide insomma una validazione di almeno un campo… per la prima domanda pensi possa funzionare?
Grazie
Certo che no. Un form non può inviare un email. E’ una capacità che ha unicamente il server.
Se vuoi fare un form che invia un email, dovrai spedire i dati al server ed utilizzare l’apposita funzione “mail” di PHP.
Buongiorno,
complimenti per questo articolo dove tutto è chiarissimo, ma…. quando sposto il tutto sul mio pc non funziona, ovvero:
– copio e incollo il file index.html su word e lo salvo su mio pc.
– modifico il valore action=”subscribe.php” in action=”https://www.yourinspirationweb.com/example/maurizio/mobile/subscribe.php” in modo che punti allo script php da lei creato
– carico il file index.html con vari browser o compilo per dispositivi mobili con phonegap e quello che ottengo è:
la pagina con il form viene visualizzata correttamente come nel suo esempio on-line mentre la pagina di risposta dello script php viene visualizzata senza la formattazione di jquery, come se fone una pagina html a parte, mentre nell’esempio on-line si vede la transizione tra la pagina del form e quella di risposta che utilizza la formattazione jquery.
sono giorni che provo a fare prove ma non ne vengo a capo.. chissa se qualcuno può aiutarmi.
Grazie.
Dopo svariati tentativi sono riuscito a capire qualcosa, almeno spero.
Se la pagina principale e lo script php risiedono nello stesso indirizzo, o cartella principale allora lo script php funziona e la pagina restituita viene visualizzata con lo stile corretto.
Grazie!
Grazie per esserti iscritto.
Riceverai la nostra newsletter all’indirizzo
Se la pagina principale e lo script php si trovano su due indirizzi diversi, come nel caso da me evidenziato prima, lo script php deve restituire una pagina web completa ovvero in questo caso:
jQueryMoblie
Grazie!
Grazie per esserti iscritto.
Riceverai la nostra newsletter all’indirizzo
Dico bene?
opss…. scusate non mi ha visualizzato il codice html il secondo codice comunque comprende !DOCTYPE html etc…..
Vedete xhw sono saltati titti i collegamenti ai file di esempio…
Ciao, complimenti per questo splendido articolo. Finalmente ci sto capendo qualcosa anch’io con il mobile.
Ovviamente mi è sorto subito un dubbio o meglio, una domanda :)
Una volta creata una qualsiasi applicazione come faccio a renderla fruibile mediante un dowload dal sito?
Non mi è chiaro come utilzzarla su smartphon al di là della semplice navigazione..,
e se volessi venderla?
In poche parole non mi è chiaro come creare il “pacchettino” della app
Spero di ricevere una vostra risposta.
Grazie e complimenti per il vostro lavoro.
Dopo che hai editato e compilato il file nel cartella in cui risiede il progetto trovi il file .apk per android nella cartella bin e sotto la cartella build per ios.
I file apk quando sono scaricati su un android da un qualsiasi sito web vengono installati automaticamente.
I file per ios o si scaricano dall’app store (quindi ti devi iscrivere e pagare circa 100 euro/anno) oppure vanno istallati tramite ftp sicura sbloccando l’iphone.
I file vengono poi scompattati nei palmari e ritroverai il file html originale quindi è buona norma per non regalare il tuo lavoro in giro utilizzare dei software per “minimizzare” il file html prima di compattarlo, praticamente eliminano tutti i commenti, gli spazi inutili e cambiano il nome delle variabili con lettere a caso.
Ciao e complimenti per la guida, Senti, esiste un modo per fare i controlli sui campi?
// Controllo dei caratteri inseriti in un campo
keydigitate = 0
$("#nome").keypress(function(key){
// Se viene digitato un carattere prima degli 800 millisecondi fa ripartire il timer
if (keydigitate > 0) { clearTimeout(timeout); };
// Aumenta il numero dei caratteri digitati
keydigitate++;
// Aggiorna la stringa temporanea delle lettere digitate
keyfinale = keyfinale + String.fromCharCode(key.which);
// Aspetta che si sia finito di digitare da 800 millisecondi
timeout = setTimeout(function() {
// Azzera il contatore dei caratteri digitati
keydigitate = 0;
//Mostra le lettere premute per test
//alert(keyfinale);
// Inserisci qui tutte le opzioni di verifica
if (keyfinale=="paperino") {
alert("Paperino non è un nome valido");
};
// Resetta la parola digitata
keyfinale = "";
}, 800); //Fine timeout (millisecondi)
});
Ottima guida!
Seguendo le tue guide mi è però venuto un dubbio…
Per personalizzare il form con dei parametri css ad hoc ho creato un style.css e lo ho caricato nella pagine dal form. Se vado direttamente nella pagina del form non ci sono problemi ma se entro da un’altra pagina jqm mi resta lo stile base.
Ho notato che con un refresh della pagina tutto torna normale anche se navigo nelle pagine del sito mobile, ma appena esco dal sito e ci ritorno il problema si ripropone :(
Immagino sia colpa della chiamate asincrone che jqm fa a tutti i collegamenti della pagina, ma non riesco a trovare nessun modo per caricare i css…
Tu conosci un modo per risolvere questo problema?
A me la pagina esempio
https://www.yourinspirationweb.com/example/maurizio/mobile/index7.htm
non la carica, continua a girare il loader a vuoto. Colpa mia?