[Ajax & IE] Incompatibilità

[Shadow976]

Carissimi, spero possiate risolvere un problema apparentemente banale che mi ha fatto dormire poche ore nelle ultime due notti (purtroppo ho il vizio di "non mollare" finché non riesco a completare qualcosa). Vi farò una descrizione precisissima.

Nella mia web application Java la mia pagina jsp presenta due caselle option, provincia e città. Via Ajax, la pagina jsp invia al server una richiesta asincrona appena si modifica la prima casella e riceve da una servlet l'elenco delle sole città compatibili con la provincia scelta popolando con il testo restituito le righe della seconda casella. In Firefox tutto funziona benissimo, ad esempio selezionando Roma nella prima, nella seconda option vedo tutte le province di Roma; in Explorer no, l'elenco della option è vuoto e non vedo nessuna riga.

Dubito che dipenda dal codice delle caselle option, in quanto altre caselle dello stesso tipo in altri punti del programma sono associate all'evento onclick di una specifica voce e l'evento desiderato (magari un semplice alert che si apre quando clicco su una delle option) si scatena tranquillamente anche in IE, anche se non si tratta di eventi Ajax.

Dubito che dipenda dalla servlet in quanto l'intera applicazione è popolata di servlet che richiamano i dati nel mededimo modo e tutti gli elenchi in tutte le pagine funzionano benissimo anche in IE.

Io sospetto che dipenda più dalla specifica funzione javascript che per qualche ragione è compatibile con tutto ma non con IE; ed allo scopo di avere un vostro parere ve la posto.

Grazie in anticipo, a prescindere dal risultato sarò gratissimo a chiunque abbia fatto anche solo un tentativo per darmi una mano.

function CreateXmlHttpReq(handler) {
   
  var xmlhttp = null;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch(e) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}



function gCitta(prov) {
    myRequest = CreateXmlHttpReq(myHandler);
    myRequest.open("GET","ServletCittaSelect?prov=" + prov, true);
    myRequest.send(null);
}



function myHandler() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        document.getElementById("citta-rows").innerHTML = myRequest.responseText;    
    }
}

[Xinod]

IE + get = sicuramente in cache

http://forum.html.it/forum/showthrea...readid=1340072

[Shadow976]

Si, grazie per la tua risposta, ma non ho ancora capito dalla tua risposta né dalla discussione indicata come modificare il mio codice e cosa fare. Se quello che volevi dirmi è sostituire "GET" con "POST", lo stesso problema si ripresenta puntualmente. Diversamente, cosa devo fare?

Grazie.

[cavicchiandrea]

Non intende che facendo una chiamata GET ie non esegue le modifiche ma ripesca i dati dalla cache per ovviare prova cosi:
myRequest.open("GET","ServletCittaSelect?no-cache="+new Date().getTime()+"&prov=" + prov, true);
oppure (come consigliato da Andr3a)
myRequest.open("GET","ServletCittaSelect?prov=" + prov+"&_="+-new Date, true);

[Shadow976]

TERRIBILE.

Dopo ore di tentativi, togliendo e rimettendo (dico sul serio) carattere per carattere, ho capito la causa del problema. Non è Ajax, ma l'uso che ne faccio.

Ajax in realtà funziona benissimo; ma con l'output che restituisce quella funzione io dovevo popolare una tabella e per far ciò tramite javascript impostavo un innerHTML su una tabella tentando di riempirla con un contenuto del tipo:

<tr>
<td>testopresodaajax</td>
</tr>

Inserire testo tramite innerHTML, se si tratta di testo semplice ad esempio in un div, funziona bene ovunque. Inserire testo con tag specifici HTML ad esempio per inserire righe in una tabella funziona bene su Firefox, ma no su Explorer. Ho la certezza di quanto vi dico in considerazione di tantissime prove eseguite. La domanda quindi cambia (ma il titolo è comunque valido, visto che sempre di incompatibilità con IE si tratta) e diventa:

come posso modificare la seguente funzione Javascript volta a riempire una tabella con diverse righe, funzione che va bene su Firefox, affinché vada bene anche su Internet Explorer (versione 5.5 e successive), visto che non ho altre scelte per popolare via Ajax una tabella?

function rowCreate(){
document.getElementById("myTable").innerHTML = "<tr><td>prova<td></tr>"
}

[Nerlaleph]

IE + innerHTML + table = problemi! (comunque IE fa sempre parte dell'equazione)
dai un occhio qua: http://forum.html.it/forum/showthrea...readid=1372475
e in particolare qua: http://msdn.microsoft.com/it-it/library/ms532998(en-us,VS.85).aspx

[Shadow976]

Grazie innnanzitutto della risposta e del tempo che mi hai dedicato: abbiamo appurato che è un grosso problema, ora vorrei trovare una soluzione.

Ovvero, tornando al quesito principale, cioé al problema (chissà quante volte lo avrete visto nei vari siti ai quali vi siete iscritti) dell'elenco comuni dinamicamente filtrato via Ajax dalla provincia appena impostata in una select, e considerato che nel mio caso Ajax restituisce solo del testo nudo e puro, secondo lo schema:

1) Imposto la provincia
2) Ajax la trasmette ad una servlet
3) Tale servlet si collega ad una classe di business che filtra i comuni da una tabella
4) Con tali dati la servlet restituisce del testo costruito con i dati ricevuti
5) Javascript poi inser(HTML)isce tale blocco di testo nella tabella comuni

Come posso realizzare quanto vorrei fare?

[Shadow976]

Scusate, mi rendo conto di essermi spiegato in modo poco chiaro, e di non aver fatto capire il vero nocciolo del problema. Sarò dettagliatissimo.

Funzionamento

1. Come detto, il mio scopo è quello di creare qualcosa che presentasse all'utente un elenco dei soli comuni ubicati nella provincia appena selezionata. Ovvero, immaginate una pagina con due select, provincie e comuni. Quando l'utente seleziona una provincia, la seconda select si popola dei soli comuni compatibili con la provincia selezionata nella prima select.
2. Funzionalmente, quando si seleziona nella prima select una provincia, si attiva una funzione Ajax che si collega ad una servlet Java trasmettendole un id della provincia scelta. Questa servlet java si collega ad una classe business che filtra da un database la tabella comuni, restituendo solo quelli ubicati nella provincia desiderata; non vado oltre perché questa parte business funziona benissimo e poi vi annoierei visto che non riguarda il mio quesito.
3. Questa servlet, il cui codice ti copio sotto, restituisce alla chiamata effettuata del testo nudo e puro, cioé l'unico tipo di dato che tramite Ajax è possibile ottenere.

Questo è il punto! Se potessi ricevere da Ajax ad esempio un oggetto list o un array tutto sarebbe più facile, avrei una lista di elementi identificabili con un indice e potrei reiterare uno specifico codice per ciascuna singola riga tra quelle restituite. Ma da Ajax non posso recevere certo qualcosa tipo array[i], sarebbe troppo bello, posso solo ricevere del testo tramite out.println, e l'unico uso che posso fare di quell'unico blocco di testo è ficcarlo da qualche parte tramite html.

Non ricevo questo:

list(1) Pontedera
list(2) Valdarno

ma al limite questo:

<tr>
<td>Pontedera</td>
<td>Ponsacco</td>
<tr>

Per chiarezza ancora maggiore ti copio il codice della servlet, nella parte che vi interessa:

PrintWriter out = response.getWriter();
		
		java.util.List acList = new ArrayList();
		java.util.List [] ListVector;
		ListVector = new java.util.List[1];
		BusinessComuni bc = new BusinessComuni();	
		ValueComuni va = new ValueComuni();
		try {		
				acList = bc.getList(provIndex);		
				ListVector[0] = acList;
				request.setAttribute("ListVector", ListVector);				
		} catch (InstantiationException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		java.util.Iterator IteratorList = acList.iterator();
		while (IteratorList.hasNext()){	
			
		avv = (ValueComuni)IteratorList.next();
		out.println("<td">" + avv.getComune() + "</td>");
		}

Ecco, ora spero di essermi spiegato meglio. Grazie come sempre a tutti.

[cavicchiandrea]

Originariamente inviato da Shadow976
TERRIBILE.

Dopo ore di tentativi, togliendo e rimettendo (dico sul serio) carattere per carattere, ho capito la causa del problema. Non è Ajax, ma l'uso che ne faccio.

Ajax in realtà funziona benissimo; ma con l'output che restituisce quella funzione io dovevo popolare una tabella e per far ciò tramite javascript impostavo un innerHTML su una tabella tentando di riempirla con un contenuto del tipo:

<tr>
<td>testopresodaajax</td>
</tr>

Inserire testo tramite innerHTML, se si tratta di testo semplice ad esempio in un div, funziona bene ovunque. Inserire testo con tag specifici HTML ad esempio per inserire righe in una tabella funziona bene su Firefox, ma no su Explorer. Ho la certezza di quanto vi dico in considerazione di tantissime prove eseguite. La domanda quindi cambia (ma il titolo è comunque valido, visto che sempre di incompatibilità con IE si tratta) e diventa:

come posso modificare la seguente funzione Javascript volta a riempire una tabella con diverse righe, funzione che va bene su Firefox, affinché vada bene anche su Internet Explorer (versione 5.5 e successive), visto che non ho altre scelte per popolare via Ajax una tabella?

function rowCreate(){
document.getElementById("myTable").innerHTML = "<tr><td>prova<td></tr>"
}

Secondo me hai due strade:
-1) Possibilità (a mio avviso la + semplice) invece di creare una riga della tabella ti crei una tabelle completa lato server e cancelli (se esiste la tabella vuota) nel documento originale e al suo posto inserisci la tabella precompilata lato server.
-2) Possibilità tramite server ti crei un array (prova|prova1|prova2|) e tramite dom ti crei la tabella e splittando array inserirai i vari dati nelle singole celle. (molto + complicato)

[pietro09]

:master: non puoi farti restituire qualcosa del genere?

<table>
<tr><th>comune</th></tr>
<tr>
<td>testopresodaajax</td>
</tr>
</table>