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!

Tag:

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

21 commenti

  1. Tizionario
  2. Atramon
  3. Paolo
  4. Paolo
  5. Paolo
  6. Giuseppe
  7. marco
    • Paolo
  8. Pino
    • Paolo
  9. Alessio
  10. PierLuigi Franchi

Trackback e pingback

  1. Raccolta di articoli della settimana 20-26/06/2011 | Saverio Gravagnola
    [...] Submit di form con jQuery Mobile (Your Inspiration Web) [...]
  2. Raccolta di articoli della settimana 26/06/2011 | Saverio Gravagnola
    [...] Submit di form con jQuery Mobile (Your Inspiration Web) [...]

Lascia un Commento