Jan 192013
 

Possiamo usare il nuovo campo di input di html5, l’input type range, per acquisire un numero intero come input del nostro utente.

Come prima cosa prepariamo l’html della pagina con un form:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

<div data-role="page" id="pagina">
<div data-role="header"><h1>Slider</h1></div>
<div data-role="content">
<form action="#" method="post">
<div data-role="fieldcontain">
...
</div>
</form>
<a href="#" id="leggi" data-role="button">Leggi</a>
</div>
</div>
</body>
</html>

Abbiamo già inserito anche un bottoncino per la lettura.

Inseriamo quindi l’input che ci interssa:


<label for="myslider">Slider</label>
<input type="range" id="myslider" value="3" min="0" max="10">

E in ultimo un piccolo script per leggere i contenuti:


$(document).ready(function(e) {
$('#leggi').on('click',function(e){
var x=$('#myslider').val();
alert(x);
})
});

L’esempio

Dec 022012
 

una seconda possibilità di gestire i form in jQuery Mobile è adottare delle soluzioni one page basandosi su ajax.

Per fare questo proveremo una pagina di lgoin con ritorno al form se la login fallisce oppure visualizzazione di un’altra pagina se la login va a buon fine.

Partiamo con le classiche intestazioni:


<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>

In seguito creiamo la pagina di login con uno span dove eventualmente inserire il messaggio di errore:


<div data-role=”page” id=”login”>
<div data-role=”header”>
<h1>My Title</h1>
</div>
<span id=”error”></span>
<form id=”login_user” data-ajax=”false”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Password:</label>
<input type=”text” id=”pwd” name=”pwd”>
<button type=”submit”>Submit</button>
</form>
</div>
</div>

Successivamente predisponiamo una semplicissima seconda pagina per il post login:


<div data-role=”page” id=”loginok”>
<div data-role=”header”>
<h1>My Title</h1>
</div>>
<div data-role=”content”>
<span id=”test”></span>
</div>
</div>

Passiamo alla sostanza, cioè al document.ready intercettiamo il submit del form e blocchiamo il comportamento di default:


$(document).ready(function(e) {
$(‘#login_user’).on(‘submit’, function (e) {
e.preventDefault();

In seconda battuta pre paro una variabile per il mio form e procedo con il post dei dati sulla form.php:


var $this = $(this);
$.post(
‘form.php’,
$this.serialize(),

I dati inseriti saranno passati con il metodo serialize().

La form.php è sostanzialmente “finta” ovvero è basata su un if anche se nella realtà verificherà le credenziali nel database.


<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
if($email==’pippo@tin.it’ && $pwd==’pippo’){echo ‘ok’;}
else{echo ‘ko’;}
?>

Quindi se lo user è pippo@tin.it e la pwd pippo la login andrà a buon fine risponderà ok, viceversa la pagina risponderà ko

Andiamo a gestire la risposta:


function (str){
if(str==’ok’){
$(‘#test’).html(str);
$.mobile.changePage(‘#loginok’)
}
else{
$(‘#error’).html(‘Errore login’);
$.mobile.changePage(‘#login’)
}

Se la risposta è ok, l’utente visualizzerà la pagina in loginok, altrimenti inseriremo un messaggio nello span con id=error

e ritorneremo sulla logi.

L’esempio

Nov 292012
 

jQuery Mobile usa uno schema ajax per la gestione dei form, anche se il risultato finale può sembrare meno trasparente di quello che possiamo immaginare.
Partiamo con la costruzione della nostra pagina base, ci servirà un tema, jQuery e appunto jQuery Mobile:


<head>
<title>My Page</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>
</head>

Poi costruiamo la classica pagina jqm riempiendo il content con un form per il login:


<div data-role=”page” id=”login”>
<div data-role=”header”>
<h1>My Title</h1>
</div><!– /header –>
<div data-role=”content”>
<span id=”error”></span>
<form id=”login_user” action=”form2.php” method=”post”>
<label>Email:</label>
<input type=”text” id=”email” name=”email”>
<label>Password:</label>
<input type=”text” id=”pwd” name=”pwd”>
<button type=”submit”>Submit</button>
</form>
</div><!– /content –>
</div><!– /page –>

Come di consueto il form viene spedito alla pagina indicata nella action con il metodo specificato,

jqm però invierà questa richiesta con l’oggetto XmlHttpRequest come si può osservare monitorando la apgina con firebug.

A questo punto possiamo supporre che la nostra pagina form2.php verifichi le credenziali e se la login non va a buon fine rimandi alla pagina di partenza, viceversa mostri il nuovo html.

Il controllo


<?php
$email=$_POST['email'];
$pwd=$_POST['pwd'];
if($email!=’pippo@tin.it’ || $pwd!=’pippo’){header(‘location: jqm_form2.html’);exit();}
?>

E la pagina html:


<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css” />
<script src=”http://code.jquery.com/jquery-1.8.2.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js”></script>
<script>
</script>
</head>
<body>
<div data-role=”page” id=”loginok”>
<div data-role=”header”>
<h1>My Title</h1>
</div><!– /header –>
<div data-role=”content”>
<span id=”test”>ok</span>
</div><!– /content –>
</div><!– /page –>
</body>
</html>

L’esempio

Oct 312012
 

Affontiamo il problema della validazione dei form, problema annoso in passato ma oggi risolvibile più agevolemnte.

Useremo jQuery e il suo plugin jQuery Validate per risolvere la nostra questione, per inciso il plugin è in sé interessante poiché definisce i metodi di validazione più comuni, inoltre permette l’estensione con l’aggiunta di personalizzazioni.

Partiamo dal form con 3 campi di input obbligatori: il nome, l’email e lo username:


<form name=”info” id=”info”>
<fieldset>
<legend>Dati</legend>
<label for=”nome”>Nome</label><br />
<input type=”text” id=”nome” name=”nome” /><br /><br />
<label for=”email”>Email</label><br />
<input type=”text” id=”email” name=”email” /><br /><br />
<label for=”username”>Username</label><br />
<input type=”text” id=”username” name=”username” /><br /><br />
<input type=”button” id=”submit” value=”invia” />
</fieldset>
</form>

Nell’html mettiamo anche un div nascosto che useremo per dialogare con i nostri utenti:


<div id=”dialog” title=”Test”></div>

Prepariamo anche lo stile della label per la gestione degli errori:


label.error{ font:bold 14px Arial; color:#900;}

Passiamo alla parte di validazione vera e propria. Come prima cosa al caricamento della pagina agganciamo gli eventi che vogliamo gestire.

Il primo sarà relativo alla validazione dello username e andremo a verificare che non sia presente nel db con una chiamata ajax (si osservi che questa verifica non esenta dalla verifica server-side).

Quindi all’evento blur sul nostro campo, andremo a leggere il valore digitato dall’utente e manderemo una chiamata ajax al server web, in caso di risposta negativa, rimuoviamo la label dell’errore,

per evitare duplicazioni, la rimettiamo, svuotiamo il campo, altrimenti semplicemnte rimuoviamo la label dell’errore.


$(‘#username’).blur(function(){
var username=$(‘#username’).val();
$.ajax({
type:’GET’,
url:’data/test_username.php?username=’+username,
success:function(str){
if(str==’KO’){
$(“#username_error”).remove();
$(‘#username’).val(”);
$(‘#username’).after(‘<label for=”username” id=”username_error”>Username presente</label>’);
$(‘#username’).focus();
}
else{$(“#username_error”).remove();}
}
})
})

La successiva porzione di codice validerà il form e ci faremo restituire un valore booleano in base all’esito dell’operazione,

quindi al click sul submit, ma sipoteva anche dire al submit del form, aggiungiamo la vera validazione:


$(‘#submit’).click(function(){
var valido=$(‘#info’).validate().form();

})

Nel metodo validate specificheremo rules e messagges come ben spiegato nella pagina del plugin


rules:{
nome:’required’,
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
}
},
messages:{
nome:’Campo obbligatorio’,
email:{
required:’Campo obbligatorio’,
email:’Devi inserire un indirizzo valido’
},
username:{
required:’Campo obbligatorio’,
minlength:’Devi inserire almeno 2 caratteri’
}
}

Nel nostro caso ci siamo semplicemente limitati ai campi obbligatori e alla validazione dell’email.

Ultimo step l’invio del form.

Se la validazione ha avuto successo invieremo una chiamata ajax al nostro server web, passando i dati del form serializzati:


$.post(‘dati/inserisci.php’,$(‘#info’).serialize()

per poi gestire con una callback l’esito della risposta che se positivo implicherà:

1. nascondere il form

2. mostrare un messaggio di avviso all’utente

3. sostituire un contenuto visuale al posto del form


function(){
$(‘#info’).hide();
$(‘#dialog’).dialog().html(‘<p>Tutto ok!</p>’);
$(‘#contenitore’).append(‘<p>Record inserito</p>’);
}

Per testare tutte le funzionalità dell’esempio lo username presente è “pippo”