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
Sorry, the comment form is closed at this time.