Un "problema" ricorrente è popolare una select in base alla scelta effettuata in un’altra select. Un esempio è quello delle regioni e città: si seleziona una regione dalla prima select e tramite ajax si popola la seconda select con le sole città della regione scelta. Ma ci sono migliaia di esempi e casi d’uso.

Guarda Demo

Vediamo come sia semplice realizzare tutto con l’aiuto di jQuery.

Come esempio base ci basta un file html che contiene le select ed un file php al quale viene inoltrata la richiesta asincrona e che ci restituisce i dati in base ai parametri passati.

Nella sezione head del file html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"</script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	   $("select#primaselect").change(function(){
		 $.getJSON("select.php",{id: $(this).val()}, function(dati){
			var options = '';
			for (var i = 0; i < dati.length; i++) {
				options += '<option value="' + dati[i].valore + '">' + dati[i].etichetta + '</option>';
			}
			$("#secondaselect").html(options);
			$('#secondaselect option:first').attr('selected', 'selected');
		});
            });
      });
</script>

Nel body del file html:

1
2
3
4

<b>Scegli il tuo smartphone preferito:</b>
<select id="primaselect"><option value="">Scegli</option><option value="1">HTC</option><option value="2">SAMSUNG</option><option value="3">MOTOROLA</option>
</select>
<select id="secondaselect"></select>

Contenuto del file php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
 
  $dati = array();
 
  $id = $_GET['id'];
 
  if($id == 1){
     array_push($dati, array("valore"=>"cod_001","etichetta"=>"Desire HD"));
     array_push($dati, array("valore"=>"cod_002","etichetta"=>"Flyer"));
     array_push($dati, array("valore"=>"cod_003","etichetta"=>"Chacha"));
     array_push($dati, array("valore"=>"cod_004","etichetta"=>"HD2"));
  }
 
  if($id == 2){
     array_push($dati, array("valore"=>"cod_005","etichetta"=>"Galaxi S"));
     array_push($dati, array("valore"=>"cod_006","etichetta"=>"Wave II"));
     array_push($dati, array("valore"=>"cod_007","etichetta"=>"Omnia 7"));
     array_push($dati, array("valore"=>"cod_008","etichetta"=>"Omnia HD"));
 
  }
 
  if($id == 3){
     array_push($dati, array("valore"=>"cod_009","etichetta"=>"Atrix 4G"));
     array_push($dati, array("valore"=>"cod_010","etichetta"=>"Droid Bionic"));
     array_push($dati, array("valore"=>"cod_011","etichetta"=>"Cliq 2"));
     array_push($dati, array("valore"=>"cod_012","etichetta"=>"Bravo"));
 
  }
 
   echo json_encode($dati);
?>

In questo caso il file php recupera i dati da alcuni array costruiti ad hoc per l’esempio, ma nulla vieta (anzi si spera) che i dati siano recuperati da un db.

Per qualsiasi chiarimento, a disposizione.

Guarda demo

Le richieste asincrone effettuate con Ajax hanno spesso lo scopo di modificare parti della pagina html. Effettuando varie richieste consecutive, ci si può trovare innanzi ad una pagina completamente diversa da quella iniziale, ma con uno stesso url nella barra degli indirizzi!

Esempio: Il sito www.sitodiannunci.it, alla pagina annunci.php permette di navigare tra gli annunci di una categoria mediante due pulsanti avanti e indietro. Il contenuto della pagina annunci.php cambia, mostrando i dati relativi al nuovo annuncio caricati via Ajax.

Dopo varie pressioni dei pulsanti avanti e indietro, l’utente decide di salvare la pagina tra i preferiti perchè interessato all’annuncio. Cosa succede? Viene salvata la stringa www.sitodiannunci.it/annunci.php, ma da questa non si riesce a  risalire all’annuncio di interesse. E’ chiaro che servirebbe una variabile da aggiungere alla query string che identifichi univocamente un annuncio, tipo www.sitodiannunci.it/annunci.php?id=123.

Se si modifica l’url della pagina ad ogni annuncio con un linguaggio lato server tipo php, si ottiene il ricaricamento della pagina che non è un effetto voluto (altrimenti perchè stiamo usando Ajax?). Stesso risultato se modifichiamo la proprietà window.location.href  via javascript.  Allora come risolvere???

Ci viene in aiuto una proprietà poco conosciuta  dell’oggetto location javascript: window.location.hash.

La stringa contenuta in window.location.hash sarà aggiunta in coda all’url della pagina, preceduta dal simbolo cancelletto # , senza ricaricare la pagina, ad esempio  www.sitoannunci.it/annunci.php#123

Salvando nei preferiti  www.sitoannunci.it/annunci.php#123   la proprietà window.location.hash conterrà la stringa 123 che può servire a risalire all’annuncio di interesse.

Abbiamo visto come risalire al contenuto di un annuncio  impostando e poi leggendo la proprietà javascript window.location.hash .

E non è tutto. Si poteva mai parlare di javascript senza nominare jQuery??? Certo che no. Esiste infatti un plugin, jquery.history, che rende tutto semplicissimo.

jQuery history plugin aiuta a supportare i pulsanti avanti/indietro ed il bookmarks nelle applicazioni javascript. Permette di salvare lo stato nell’url hash e di ripristinarlo.

live demo    ( consultare il codice sorgente )

Ci sono 2 metodi per interagire con l’oggetto jQuery.history:

jQuery.history.init(callback [, options])

Inizializza il plugin e va richiamato una volta quando la pagina è completamente caricata.

jQuery.history.load(hash)

Carica una stringa in location.hash,crea una nuova entry nella storia della navigazione e invoca la funzione di callback se necessario.  A meno che  l’hash passato come parametro sia diverso da quello corrente, la funzione di callback non è invocata.

Documentazione completa (in inglese)

Guarda la demo live

Testato e funzionante anche su dispositivi mobili touch screen iphone e Android !

Il contenuto del div scroller può essere qualsiasi elemento html (anche solo una tabella, a differenza di altri plugin! )

Il plugin calcola automaticamente l’altezza del div scroller.

Si possono utilizzare più istanze di scroller nella stessa pagina cambiando semplicemente gli id del div wrapper, del div scroller e dei pulsanti.

Si può impostare di quanti pixel deve scorrere il contenuto e la velocità di scorrimento.

Facilissimo da usare:

• basta creare due div, uno dentro l’altro;
• il div esterno sarà il contenitore;
• il div interno sarà lo scroller;
• due pulsanti per scorrere su e giù;
• tutti gli elementi inseriti all’interno del div scroller scorreranno alla pressione dei pulsanti.

1
2
3
4
5

<div id="wrapper" style="width:350px;height:120px;">
	<div id="scroller">. . . </div>
</div>
<p><input id="su_btn" type="button" value="su" /> 
<input id="giu_btn" type="button" value="giù" /></p>

Includere i files jQuery e applicare il plugin al div contenitore:

7
8
9
10
11
12
13
14

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.verticalscrollplus-1.0.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
      $("#wrapper").verticalScrollPlus({step:100});
      $("#wrapper2").verticalScrollPlus({speed: 1500, step: 50, upID: "#su_btn2", downID: "#giu_btn2", scrollerID:"#scroller2" });
  });
  </script>

Se reputi che il jQuery Vertical Scroller Plus Plugin ti sia stato utile, pensa ad una libera donazione come incentivo allo sviluppo futuro. Ti ringrazio anticipatamente.

Il plugin può essere scaricato da:

http://plugins.jquery.com/content/verticalscrollerplus-10

jquery.verticalscrollplus-1.0.js

Plugin options:

• speed : quanto è veloce l’animazione di scorrimento verticale;(default = 500)
• step: di quanti pixel scorre il contenuto ad ogni pressione di tasto su oppure giù;(default = 60)
• upID: id dell’elemento che fa partire l’animazione verso su;(default = #su_btn)
• downID: id dell’elemento che fa partire l’animazione verso giù;(default = #giu_btn)
• scrollerID: id dell’elemento il cui contenuto scorrerà verticalmente;(default = #scroller)

Mi riferisco alla  etichetta di loading che compare in alto nella pagina  ogni qualvolta eseguiamo un’azione tipo eliminare un messaggio (che evidentemente effettua richieste Ajax) all’interno ad esempio di GMail.

Con l’aiuto di JQuery diventa tutto semplicissimo. Vedi la demo live.

Di seguito la parte più importante del codice javascript:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){
 
         /* quando si preme il pulsante si carica il contenuto da un file di testo  */
         $('#loadingbtn').click(function(){
             $('#contenuto').load('file.txt');
         });
 
         /* quando parte la richiesta Ajax mostra il div di loading, quando la richiesta
            viene completata nasconde il div  */
         $('#loading').ajaxSend(function(){
           $(this).fadeIn('slow');
         }).ajaxComplete(function(){
           $(this).fadeOut('slow');});
 
 });

Di seguito il codice html della pagina:

1
2
3
4
5
6
7

<p>Clicca sul pulsante per caricare via Ajax del contenuto nel div sotto</p>
 
<input type="button" id="loadingbtn" name="loadingbtn" value="Carica contenuto" />
<br /><br />
<div id="contenuto" name="contenuto"></div>
 
<div id="loading" name="loading">Loading...</div>

Importante la regola css che imposta lo stato iniziale dell’avviso di loading su invisibile, in quanto è su questa che va ad agire javascript al verificarsi degli eventi ajaxSend e ajaxComplete.

1
2
3
4
5
6
7
8
9

#loading{
  position:fixed;
  top:0;
  left:0;
  background-color: green;
  color:white;
  width: 80px;
  display:none;
}

1. Il pallino del radiobox viene annerito ad indicare che è selezionato;
2. Viene lanciato un evento javascript di tipo onchange, che volendo può essere intercettato.

Supponiamo di avere un gruppo di radiobox che rappresentano colori:

<input name="colori" type="radio" value="red" /> Rosso 
<input name="colori" type="radio" value="green" /> Verde 
<input name="colori" type="radio" value="blue" /> Blu
 
<span id="risposta"></span>

Grazie alla potenza di jQuery è semplice intercettare l'evento onchange quando si seleziona un radiobox:

$("input[name=colori]:radio").change(function(){
    $("#risposta").html(this.value);
    $("#risposta").css("color",this.value);
});

Quando si seleziona un radiobox, il corrispondente colore viene scritto in un elemento span con id="risposta". Da notare anche come sia semplice modificare lo stile di un elemento.

Ma come si potrebbe simulare il click del mouse da jQuery?

 
var colore ="red";
 
if(colore != ""){
   $("input[value="+colore+"]:radio").attr('checked', true);
}

Attraverso il metodo attr(), risulta semplice modificare l'attributo checked del radiobox.

Sembrerebbe bastare, ma la modifica dell'attributo checked attraverso il metodo attr() ottiene come risultato la sola selezione del radiobox, senza lanciare alcun evento onchange.

Dando il valore “red” alla variabile colore, si ottiene la selezione del radiobox corrispondente, ma non viene scritto nulla nell'elemento con id=”risposta”. Questo perchè attraverso la sola modifica dell'attributo col metodo attr() non viene lanciato l'evento onchange.

Si può però lanciare l'evento onchange manualmente attraverso il codice

 
 $("input[value="+colore+"]:radio").change();

Il codice finale è

<input name="colori" type="radio" value="red" />Rosso
<input name="colori" type="radio" value="green" />Verde
<input name="colori" type="radio" value="blue" />Blu
 
<span id="risposta"></span>
 
<script type="text/javascript">
var colore ="red";
 
if(colore != ""){
    $("input[value="+colore+"]:radio").attr('checked', true);
}
 
$("input[name=colori]:radio").change(function(){
         $("#risposta").html(this.value);
         $("#risposta").css("color",this.value);
});
 
$("input[value="+colore+"]:radio").change();
</script>

Guarda il risultato

Cercherò di aggiornarlo quotidianamente con soluzioni a problemini di programmazione Php, Javascript, Css, Actionscript, Java, Java EE, che quotidianamente qualsiasi Webmaster o Web Developer si trova ad affrontare, nella speranza di far risparmiare del tempo…