Introduzione a jquery (parte 2) Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 1

Transcript

1 Introduzione a jquery (parte 2) Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 1

2 Gli even7 del browser Tecnicamente si dice che si verifica un evento del browser quando si registra un cambiamento nello stato di quest ul7mo oppure un errore. Esempio di errore: $("<img />", { "src": "not/an/image.png", "alt": "Questa immagine non esiste" }) caricata.");.error(function() { }).appendto("body"); console.log("l immagine non può essere Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 2

3 Scroll della finestra Se la finestra del browser viene scrollata, si auva l evento scroll. $(window).scroll(function() { console.log("la finestra è stata scrollata."); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 3

4 Even7 rela7vi al documento Il metodo ready() viene u7lizzato per impedire che l esecuzione degli script parta prima del completamento del caricamento del DOM: $(document).ready(function() { // codice Quando l utente abbandona la pagina corrente, l evento può essere ges7to dal metodo unload(): $("<a>", { "href": " "text": "Vai al sito di Google." }).appendto("#bar"); $(window).unload(function() { alert("ciao!"); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 4

5 Binding degli even7 L utente può provocare diversi even7 del browser: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Tramite il metodo bind() è possibile legare tali even7 agli elemen7 e specificare delle funzioni di callback. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 5

6 Esempi di binding (1) Binding dell evento click: $("p").bind("click", function() { console.log("click registrato."); Binding degli even7 click e mouseover: $("p").bind("click mouseover", function() { console.log("evento registrato."); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 6

7 Esempi di binding (2) Passaggio di parametri alla funzione di callback: var messaggio="messaggio 1"; $("p.foo").bind("click", {n:messaggio}, function(event) { console.log(event.data.n); var messaggio2="messaggio 2"; $("#bar").bind("click", {n:messaggio2}, function(event) { Parametro (oggejo JSON contenente le variabili da u7lizzare nella funzione di callback) console.log(event.data.n); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 7

8 Esempi di binding (3) Associare callback differen7 ad even7 differen7: $("p").bind({ "click": function() { console.log("click registrato."); } }, "mouseover": function() { console.log("mouseover registrato."); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 8

9 Unbinding Per rimuovere i gestori di tuu gli even7 dai paragrafi: $("p").unbind(); Per rimuovere soltanto il gestore dell evento click dai paragrafi: $("p").unbind("click"); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 9

10 Live/die live()e die() funzionano come bind() e unbind(), ma manipolano i gestori di even7 anche per gli elemen7 che ancora non sono presen7 nel DOM: $("a").live("click", function() { console.log("link cliccato."); return false; $("<a>", { "href": " "text": "Vai al sito di Google." }).appendto("#bar"); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 10

11 Altri metodi u7li one(): come bind(), ma dopo la prima occorrenza dell evento avviene l unbind(). toggle(): permeje di collegare all evento click più funzioni che verranno richiamate alterna7vamente al verificarsi degli even7 di questo 7po. trigger(): provoca l evento passato come argomento. Mol7 even7 hanno delle scorciatoie: trigger("click") -> click(); trigger("mouseover") -> mouseover();... Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 11

12 Metodi per AJAX Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 12

13 ajax.php Nel seguito u7lizzeremo la seguente pagina PHP come parte lato server per le chiamate AJAX: <?php echo '<p class="ajax">questo paragrafo è stato caricato per mezzo di AJAX.</p>', '<pre>variabili GET: ', print_r($_get, TRUE), '</pre>', '<pre>variabili POST: ', print_r($_post, TRUE), '</pre>';?> Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 13

14 La funzione principale La funzione di base per inviare richieste AJAX è $.ajax() che acceja un argomento che specifica le proprietà della chiamata. Le impostazioni più comuni sono: data: da7 da inviare in formato query string (k1=v1&k2=v2) o JSON ({"k1":"v1", "k2":"v2" datafilter(data, type): callback per filtrare preven7vamente i da7 in arrivo; datatype: 7po di dato della risposta (xml, html, script, json, jsonp, text); error(xmlhttprequest, textstatus, errorthrown): callback in caso di errore; success(data, textstatus, XMLHttpRequest): callback in caso di successo; type: il 7po della richiesta (GET, POST,...); url: l URL a cui inviare la richiesta. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 14

15 Esempio $.ajax({ "type": "POST", "url": "ajax.php", "data": "var1=abc&var2=123", "success": function(data) { $("#bar").css("background", "yellow") }.html(data); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 15

16 Specificare opzioni di default $.ajaxsetup() consente di specificare le opzioni comuni a tuje le chiamate: $.ajaxsetup({ "type": "POST", "url": "ajax.php", "success": function(data) { $("#bar").css("background", "yellow").html(data); } E poi effejuare la chiamata: $.ajax({ "data": { "var1":"abc", "var2":"123" } Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 16

17 Metodi AJAX scorciatoia Per diversi usi comuni nelle applicazioni web jquery ci meje a disposizione delle funzioni scorciatoia che effejuano alcune impostazioni automa7camente e poi effejuano la chiamata: $.get() e $.post(); $.getjson(); $.getscript();.load(); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 17

18 $.get() e $.post() Chiamata GET senza parametri: $.get("ajax.php", function(data){ $("#bar").css("background", "yellow").html(data); Chiamata POST con parametro: $.post("ajax.php", {"var1":"abc"}, function(data){ $("#bar").css("background", "yellow").html(data); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 18

19 $.getjson() Supponiamo di avere una pagina json.php come segue: <?php echo '{"var1":"abc", "var2":"123"}';?> Possiamo u7lizzare il seguente codice per recuperare i da7 in formato JSON: $.getjson("json.php", function(data){ $("#bar").css("background", "yellow").html(data.var1+", "+data.var2); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 19

20 $.getscript() Supponiamo di avere una pagina script.php come segue: <?php echo 'alert("questo script e` stato caricato da AJAX");';?> Possiamo u7lizzare il seguente codice per caricare lo script remoto: $.getscript("script.php"); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 20

21 .load() A differenza delle altre funzioni AJAX,.load() è un metodo che può essere applicato ad un selejore. $("#bar").load("ajax.php", {"var1":"abc" L effejo del codice precedente è quello di sos7tuire il contenuto del paragrafo con id bar con il risultato della chiamata AJAX. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 21

22 Rivisitazione di un vecchio esempio in AJAX Riprendiamo il caso della vecchia pagina AjaxComputerList.html che recuperava da computer.php (tramite AJAX) la lista dei computer contenen7 nel nome la stringa digitata dall utente nel form. Sos7tuiamo tujo il tradizionale script con chiamate a metodi di jquery. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 22

23 La nuova pagina AjaxComputerList2.html <html> <head><title>lista di computer</title></head> <body> <form name="mioform"> Inserisci una stringa: <input type="text" name="query" id="query" size="10" /><br> <span id="risultato"></span> </form> <script src="js/jquery min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#query").bind("blur", function() { $.get("computer.php", {"query":$("#query").val()}, function(data){ $("#risultato").html(data); }) </script> </body> </html> Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 23

24 Un altro esempio: validazione form Consideriamo il seguente form (nel file form.html): <form action="#" method="post" id="regform"> <fieldset> <legend>form di registrazione</legend> <label for="nome">nome</label><br /> <input name="nome" id="nome" type="text" /><br /> <label for="cognome">cognome</label><br /> <input name="cognome" id="cognome" type="text" /><br /> <label for=" "> </label><br /> <input name=" " id=" " type="text" /><br /> <label for="password">password</label><br /> <input name="password" id="password" type="password" /><br /> <label for="password2">ripeti la password</label><br /> <input name="password2" id="password2" type="password" /><br /><br /> <input type="submit" value="registrami" /><br /> </fieldset> </form> Vogliamo implementare i classici controlli (lato client) sui campi obbligatori, sul formato dell indirizzo e- mail ecc. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 24

25 Inizializzazione <script src="js/jquery min.js"></script> <script type="text/javascript >... function inizializza() { } $("#nome").blur({c:"nome"}, campoobbligatorio); $("#cognome").blur({c:"cognome"}, campoobbligatorio); $("# ").blur({c:" "}, campoobbligatorio); $("# ").blur( valida); $("#password").blur({c:"password"}, campoobbligatorio); $("#password").blur({c:"password"}, campouguale); $("#password2").blur({c:"password2"}, campouguale); $("input:submit").click(validazione); </script> $(document).ready(inizializza); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 25

26 Campi obbligatori function campoobbligatorio(event) { var id=event.data.c; var casella=$("#"+id); $("#errore_"+id).remove(); } if(!casella.val().trim()) { } $("<span>", {"id": "errore_"+id,.insertafter(casella); "class": "errore", "style": "color: red", "text":" * il campo "+id+" e` obbligatorio!"}) Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 26

27 Validità del formato dell indirizzo e- mail function valida() { var re=new RegExp(/^[a-zA-Z0-9](\.{0,1}[a-zA-Z0-9])*@[a-zA- Z0-9]+((\-[a-zA-Z0-9]+) ([a-za-z0-9]+))+(\.((\-[a-za-z0-9]+) ([aza-z0-9]{2,}))+)*(\.[a-za-z]{2,3})$/); $("#errore_formato").remove(); if(!$("# ").val().trim().match(re)) { corretto!"}) } } $("<span>", {"id": "errore_formato", "class": "errore", "style": "color: red",.insertafter($("# ")); "text":" * il formato dell'indirizzo non e` Espressione regolare che descrive il formato correjo di un indirizzo e- mail. Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 27

28 Controllo della coincidenza dei due campi password function campouguale(event) { var psw=$("#password").val().trim(); var psw2=$("#password2").val().trim(); $("#errore_psw").remove(); if((psw psw2) && psw!=psw2) { $("<span>", {"id": "errore_psw", "class": "errore", "style": "color: red", "text":" * ridigitare la password correttamente!"}) } }.insertafter($("#password2")); Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 28

29 Validazione del form function validazione(event) { event.preventdefault(); /* impedisce l invio del form alla pressione del tasto di submit */ $(":enabled").trigger("blur"); if($("span.errore").length!=0) alert("correggi gli errori segnalati!"); // messaggio d errore } else $("#regform").submit(); // invio Complemen7 di Tecnologie Web, A.A M. Franceschet, V. Della Mea, I. ScagneJo 29