AJAX e ASP – Popoliamo le Select

(codice e parte dell’articolo sono tratti dal sito web di Sergio Gandrus, che ringrazio per il contributo e che invito a visitare al seguente link: http://www.sergiogandrus.it/)

Una domanda molto frequente nei forum è qualcosa del tipo: “Come posso modificare le option di una select in base alla scelta di un’altra select?”. Se questi valori sono statici allora la risposta è in alcune funzioni javascript che selezionano array di valori già scritti nel codice.

Se i valori sono attinti da un database allora è possibile utilizzare AJAX e l’onnipresente oggetto XMLHttpRequest. Nell’esempio abbiamo 3 regioni italiane: Campania, Lazio e Lombardia. Questi tre valori popoleranno la prima select. In base alla scelta della prima select, la seconda si popolerà con le sue province.

Il semplice DB Access si chiama “db2” e consta di due tabelle: “regioni” (campi: ID, regione), “citta” (campi: ID, id_reg, citta). C’è una relazione uno-a-molti tra “ID” della tabella “regioni” e “id_reg” della tabella “città“. Per creare la nostra applicazione ci bastano 3 file ASP: _db.asp (il file che crea gli oggetti per il db), index.asp (pagina principale con le select e le funzioni javascript), cercaprovince.asp (che effettua la query in remoto).

Sul file _db.asp non mi soffermo. E’ un semplice file che contiene tutto quello che mi può servire per aprire e chiudere connessioni e creare oggetti di database:

_db.asp
<%
set conn = Server.CreateObject(“ADODB.Connection”)
set rs = Server.CreateObject(“ADODB.Recordset”)

connAJAX = “Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source=” & Server.MapPath(“/db2.mdb”)

sub OpenDB(sConn)
  conn.open sConn
  set rs.ActiveConnection = conn
  rs.CursorType = 3
end sub

sub CloseDB()
  rs.close
  conn.close
  set rs = nothing
  set conn = nothing
end sub

sub w(sTest)
  response.write sText & vbCrLf
end sub
%>

il file index.asp contiene il cuore dell’applicazione sotto forma di due funzioni Javascript: cerca() e ricevi().

index.asp

<!– #include virtual=”/_db.asp” –>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html”; charset=iso-8859-1″ />
<title>AJAX e ASP – Popoliamo le Select</title>
<script language=”javascript”>

var ricerca_pro;

function cerca() {
 var valorecampo = document.frm_contratto.risorsa.value;
 // per l’oggetto nativo XMLHttpRequest
 if (window.XMLHttpRequest) {
  ricerca_pro = new XMLHttpRequest();
  ricerca_pro.onreadystatechange = ricevi;
  ricerca_pro.open(“GET”, “cercaprovincie.asp?reg=”+valorecampo, true);
  ricerca_pro.send(null);
 // per IE
 } else if (window.ActiveXObject) {
  ricerca_pro = new ActiveXObject(“Microsoft.XMLHTTP”);
  if (ricerca_pro) {
   ricerca_pro.onreadystatechange = ricevi;
   ricerca_pro.open(“GET”, “cercaprovince.asp?reg=”+valorecampo, true);
   ricerca_pro.send();
  }
 }
}

function ricevi() {
 var strRes;
 var arrValori;
 if (ricerca_pro.readyState == 4) {
  strRes = ricerca_pro.responseText;
  arrValori=strRes.split(“|”);
  document.form1.citta.options.length=0;
  for(i=0;i<arrValori.length;i++) {
   document.form1.citta.options[document.form1.citta.options.length] = new Option(arrValori[i].split(“|”),arrValori[i].split(“|”));
  }
 }
}
//–>
</script>
</head>
<%
‘apro connessione e istanzio oggetti
OpenDB(connAJAX)
‘query per la prima select
strsql = “SELECT id, regione FROM regioni”
rs.open strsql
%>
<body>
Scegli regione:
<form id=”form1″ name=”form1″ method=”post” action=””>
<label>regione
<select name=”regione” accesskey=”1″ tabindex=”1″ onchange=”cerca()”>
<option selected=”selected” value=0>Scegli regione</option>
<%
Do while not rs.EOF
%>
<option value=”<%=rs(“id”)%>”><%=rs(“regione”)%></option>
<%
  rs.movenext
Loop
CloseDB
%>
</select>
</label>
<p>
<label>
città
<select name=”citta” accesskey”2″ tabindex=”2″>
</select>
</label>
</p>
</form>
</body>
</html>

La funzione cerca(), scatenata dall’evento onChange sulla select “regione”, si occupa di leggere il valore selezionato nella select “regione” e di inviarlo tramite il metodo GET alla pagina cercaprovince.asp. Nella funzione si può notare una If perchè c’è la possibilità sia di utilizzare l’oggetto XMLHttpRequest nativo, sia quello messo a disposizione da Internet Explorer tramite ActiveX. L’evento onreadystatechange cattura il cambio di stato della proprietà readystate che indica, a sua volta, lo stato corrente del documento XML.

La funzione ricevi(), quando il documento XML è stato completamente caricato (readystate=4), splitta la stringa in un array e popola la select “citta”. Il file cercaprovince.asp si occupa di eseguire la query e formattare i risultati in una stringa:

cercaprovince.asp

<!–#include virtual=”/_db.asp” –>
<%
‘apro connessione e istanzio oggetti
OpenDB(connAJAX)
reg = Request.QueryString(“reg”)
strsql = “SELECT citta FROM citta WHERE id_reg = ” ®& “”
rs.open strsql
primo = 0
if not rs.EOF
  Do While not rs.EOF
    ‘compongo l’array con i risultati
    if primo = 0 Then
      primo = 1
      array_citta = rs(“citta”)
    Else
      array_citta = rs(“citta”) & “|” & array_citta
    End if
    rs.movenext
Loop
End if

w(array_citta)

CloseDB
%>

Come spesso succede con AJAX, è più difficile spiegarne il funzionamento che applicare le tecniche. Diciamo che l’unico limite reale è, come sempre, la fantasia.

4 Risposte

  1. e aggiungerei….. moooolta fantasia…. lo script non funziona…
    ho fatto delle correzioni su alcuni errori di visualizzazione:
    ad es: strsql = “SELECT citta FROM citta WHERE id_reg = ” ®& “” in realtà penso volessi dire id_reg = ” & reg
    e errori di non visualizzazione es:
    var valorecampo = document.frm_contratto.risorsa.value;
    non esiste alcun form con nome frm_contratto e anche quando il valore selezionato di una select non lo si trova così ma semmai così:
    var valorecampo = document.form1.regione.options[document.form1.regione.selectedIndex].value;

    nonostante ciò lo script non funziona… e ho perso 15 minuti di lavoro stando dietro al tuo script… ora non ce lo con te.. ma volgiamo testare le cose prima di pubblicarle?
    non ti arrabbieresti tu se ti capita la stessa cosa?
    grazie….

  2. ciao,
    come hai risolto?
    io ho lo stesso tuo problema.
    Grazie in anticipo

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: