[Ajax] Perdita valori in form dopo riempimento dinamico delle select.

[Shourndern]

Ciao a tutti,
ho un problema non da poco che mi fa impazzire. Premetto che sono alle prime armi con Ajax.

Allora, all'interno di un form sono riuscito (miracolo!) a riempire 2 select in modo dinamico (cioè riempire la select2 in relazione alla voce scelta in select1)...

...Ora, quel form mi serve per passare ciascun valore x poter inserire un nuovo record nel db, MA casualmente il valore selezionato nella select2 è VUOTO! Come è possibile?

Vi posto il codice che utilizzo:

nella pagina principale... codice JS

function createRequestObj(){ // creo un'istanza XMLHttpRequest
        var re;
        var browser=navigator.appName;
        if (browser=="Microsoft Internet Explorer"){ // sniff browser
                re=new ActiveXObject("Microsoft.XMLHTTP");
        } else re=new XMLHttpRequest();
        return re;
}


var http=createRequestObj();

function popolaElemento(parametri){ // faccio una richiesta
        //alert(parametri); // debug
        popola_luoghi();
        var url="popola.asp?Luo_ID=" + parametri
        http.open('get', url , true)
        document.getElementById('selectLuogo').innerHTML="<select><option value=\"0\">caricamento in corso...</option></select>";
        http.onreadystatechange=function(){
                if (http.readyState==4 || http.readyState=="complete"){
                        if (http.status == 200){
                                document.getElementById('selectLuogo').innerHTML=http.responseText;
                        } else {
                                document.getElementById('selectLuogo').innerHTML="<select><option>ERRORE "+http.status+"</option></select>";
                        }
                }
        }
        http.send(null);
}

nella pagina popola.asp che riempie la select2...

 Set conn = Server.CreateObject("ADODB.Connection")
        conn.Open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & server.MapPath(".") & "/livin.mdb"
            
        
        SQL=""
        SQL=SQL & "Select * from Luoghi Where "
        SQL=SQL & "[Luo_CatID]=" & Request.QueryString("Luo_ID") &""
        
        Set rs = Server.CreateObject("ADODB.Recordset")
        rs.Open sql, conn, 3, 3


        Response.Write("<select size=""1"" cols=""3"" name=""luogo"" id=""luogo"">")
        Response.Write("<OPTION Selected Value=Seleziona>Seleziona")

        Do While Not (rs.EOF)

        Response.Write("<OPTION Value="& rs("Luo_ID") &")>"& rs("Luo_Nome") &"")

        rs.MoveNext
        Loop

        Response.Write("</select>")

        rs.Close
        set rs = Nothing
        conn.Close 
        set conn = Nothing

Coem faccio a passargli il valore di questa ultima select, il cui riempimento è fatto in una pagina diversa dal form?

Per favore, se qualcuno può darmi una mano...

Grazie!

Ciao

[deleted_110]

Non sono un grande esperto di ASP (preferisco PHP) ma a me sembra che non chiudi il tag 'option'

Originariamente inviato da Shourndern

        Response.Write("<select size=""1"" cols=""3"" name=""luogo"" id=""luogo"">")
        Response.Write("<OPTION Selected Value=Seleziona>Seleziona")

        Do While Not (rs.EOF)

        Response.Write("<OPTION Value="& rs("Luo_ID") &")>"& rs("Luo_Nome") &"")

        rs.MoveNext
        Loop

        Response.Write("</select>")

e poi sarebbe meglio mettere un po' di apici... e un po' meno maiuscole... insomma il codice HTML finale che dovresti vedere e' il seguente

<option selected="selected" value="Seleziona">Seleziona</option>

ad ogni modo postaci il codice HTML che ti restituisce la tua pagina popola.asp

[Shourndern]

Il codice HTML generato del form in questione è il seguente:

<tr><td align=center><font face='Trebuchet MS' size=4 color=red><u>AGgiunGI un NUOvo EvenTO</u></font></td></tr><tr><td align=center height=20></td></tr><tr><td align=center><table align=center border=0 width=75% cellspacing=0 cellpadding=0 bgcolor=#eae7ec><tr><td align=center height=10></td></tr><tr><td align=center><form method='post' action='aggiungi_evento.asp'>Titolo: <input type="text" name="titolo" size="20" value="" /></td></tr><tr><td align=center>Data Inizio: (gg/mm/aaaa) <input type="text" name="datai" size="20" value="" /></td></tr><tr><td align=center height=10></td></tr><tr><td align=center>Data Fine: (gg/mm/aaaa) <input type="text" name="dataf" size="20" value="" /></td></tr><tr><td align=center height=10></td></tr><tr><td align=center height=10>Categoria: <select size="1" cols="3" name="cat2" id="cat2" onchange=javascript:popolaElemento(this.value)><OPTION Selected Value=Seleziona>Seleziona</option><OPTION Value=7>Cinema</option><OPTION Value=8>Teatri</option><OPTION Value=9>Locali</option><OPTION Value=10>Discoteche</option><OPTION Value=12>Mense</option><OPTION Value=13>Ristoranti</option><OPTION Value=14>Supermercati</option><OPTION Value=15>Farmacie</option><OPTION Value=16>Ambulatori</option><OPTION Value=17>Studi Medici</option><OPTION Value=18>Biblioteche</option><OPTION Value=19>Sale Studio</option><OPTION Value=20>Musei</option><OPTION Value=21>Calcio</option><OPTION Value=22>Pallavolo</option><OPTION Value=23>Basket</option><OPTION Value=24>Piscine</option><OPTION Value=25>Tennis</option><OPTION Value=26>Fitness</option><OPTION Value=27>Sport Altro</option></select></td></tr><tr><td align=center height=10></td></tr>

<tr><td align=center height=10><label name='label'>Luogo: </label><span id='selectLuogo'><select size="1" cols="3" name="luogo" id="luogo"><OPTION Selected Value=Seleziona>Seleziona</option><OPTION Value=1>Teatro Bonci</option><OPTION Value=2>aaa</option><OPTION Value=3>bbb</option><OPTION Value=4>ccc</option><OPTION Value=5>prova</option><OPTION Value=6>medico</option><OPTION Value=7>aaaa</option></select></span></td></tr><tr><td align=center height=10></td></tr><tr><td align=center><textarea name="desc" rows="7" cols="50">Inserisci una descrizione dell'oggetto.</textarea></td></tr><tr><td align=center height=10></td></tr><tr><td><input type="submit" value="Aggiungi" /><input type="reset" value="Reinposta" /></td></tr><tr><td align=center height=10></td></tr></form></td></tr></table></td></tr>

I valori nella select2 ci sono, ma sono quelli immessi nella pagina principale e non da popola.asp...
quindi nel momento in cui viene lanciato il form, è come se non riuscisse a leggere i valori della "lista corrente", andando in confusione con quelli che sono stati messi in precedenza dalla pagina principale....

Io me lo sto spiegando cosi. Ma non riesco a capire come risolvere la cosa...

[deleted_110]

Non mi sono spiegato

se tu modifichi il codice via js non lo vedrai mai se fai "visualizza codice" sotto FF o "visualizza HTML" sotto IE

l'unico modo per sapere se popola.asp funziona e' lanciare direttamente questa pagina in un browser.

oppure fare un alert

alert(http.responseText)

posta il risultato dell'alert

[deleted_110]

e ricordati di svuotare la cache ogni volta che modifichi popola.php. Ajax ha problemi di cache se lo usi via GET

[Shourndern]

Scusami, ma non ho capito dove lo devo mettere sto alert...

Ho provato a mettere uno script nella pagina popola.asp, ma non si ferma neanche... :master:

... e poi ho provato a metterlo nella pagina principale, ma non mi scrive niente.

[deleted_110]

dopo

if (http.status == 200){

metti l'alert che ti ho detto
cosi' vedi cosa ti restituisce il ajax

li' capisci se la pagina popola.asp che hai costruito fa il suo dovere

[Shourndern]

Mi scrive:

<body>

<select size="1" cols="3" name="luogo" id="luogo">
<OPTION Selected Value=Seleziona>Seleziona</option>
<OPTION Value=1>Ciccio</option>
<OPTION Value=2>aaa</option>
<OPTION Value=3>bbb</option>
<OPTION Value=4>ccc</option>
</select>

</body>

Avevo trovato una parentesi in più che non ci doveva essere, speravo che fosse quella... invece continua a non passarmi il valore dal form.

[deleted_110]

cosa c'entra il tag <body></body>???

[deleted_110]

credo di aver capito dove sta il bagolo.

Penso, ma a questo punto chiedo l'intervento di utenti piu' esperti di me, che non sia corretto usare innerHTML per modificare gli oggetti di una FORM. Infatti da una mia piccola prova sono riuscito a modificare la lista di opzioni e a mostrarla a video, ma in effetti sembra che la form non si accorga della modifica al momento dell'invio...

Probabilmente e' meglio usare funzioni come createelement e e appendchild per modificare il DOM.

A questo punto faccio atto di umilta' e chiedo pure io delucidazioni, nel frattempo faccio delle prove per verificare la mia ipotesi.

Al limite creo un nuovo thread dove entro nel merito dell'argomento