[JS] Compatibilità DOM con IE

[lyllo]

ciao gente.
non capisco bene un problema.
creo dinamicamente diversi campi di una tabella.
in FF tutto funge, in IE seppur senza avvisi, non succede nulla.

ho semi-capito che non c'è una completa compatibilià con il createElement, ma non ho ben chiaro come realizzare la compatibilità con IE.

mi sapreste aiutare?

code ok con FF ma non con IE:
...
//frammento di codice di esempio
	var col_h3 = document.createElement("TD"); 
				col_h3.setAttribute('style', 'background-image: url(immagini/sfondo_tab.jpg); color: white; font-size:10pt;'); 	
				col_h3.innerHTML = "Salva";
....
var riga_h = document.createElement("TR");
...
riga_h.appendChild(col_h3);
document.getElementById("ID_OGGETTO_DA_POPOLARE").appendChild(riga_h);

in FF funziona tutto, per questo ho solo riportato PARTE del codice.
come devo riscrivere in funzione di quel genio di IE?

grazie

[Xinod]

ancora una volta

- "ID_OGGETTO_DA_POPOLARE" dev' essere l' id di un tbody
- questo
col_h3.setAttribute('style', 'background-image: url(immagini/sfondo_tab.jpg); color: white; font-size:10pt;');
non e' corretto
leggi qui, verso la fine
http://javascript.html.it/guide/lezi...del-documento/
- questo
col_h3.innerHTML = "Salva";
e' tirato per i capelli,
usa document.createTextNode e appendilo come un elemento

[lyllo]

Originariamente inviato da Xinod
ancora una volta

- "ID_OGGETTO_DA_POPOLARE" dev' essere l' id di un tbody

funziona anche con la table direttamente.
se uso getElementsByTagName("TBODY")[0] -una volta creato un tag tbody nella tabella- non lo trova. mi dice undefined.
è per questo che non funziona in IE?

- questo
col_h3.setAttribute('style', 'background-image: url(immagini/sfondo_tab.jpg); color: white; font-size:10pt;');
non e' corretto
leggi qui, verso la fine
http://javascript.html.it/guide/lezi...del-documento/

cosa devo cercare?
è verso la fine che sono riportati i comandi IE compatibili?
e cmq nella guida che mi hai indicato gentilmente, gli stili vengono dichiarati con setAttribute.

- questo
col_h3.innerHTML = "Salva";
e' tirato per i capelli,
usa document.createTextNode e appendilo come un elemento

ok.


grazie!

[Xinod]

Originariamente inviato da lyllo
funziona anche con la table direttamente.

no, e ti ostini a non volerlo credere,
serve un tbody ed i tr vanno appesi ad esso

se vuoi evitare comportamenti inattesi (vedi sotto) il tbody va nel markup

se uso getElementsByTagName("TBODY")[0] -una volta creato un tag tbody nella tabella- non lo trova. mi dice undefined.
è per questo che non funziona in IE?

la differenza tra IE ed i browser moderni in questo specifico frangente e' che
IE considerera' un tbody presente anche se non esplicitato nel markup
gli altri no,
questo vuol dire che dopo aver appeso un tbody ad una tabella che non ha un tbody esplicitato IE considerera' il tbody appena creato come il secondo nell' htmlcollection dei tbody della tabella
in parole povere, quello che hai appena creato per IE e' qui:
getElementsByTagName("TBODY")[1]
per tutti gli altri browser e' ancora il primo (e unico), 0
ecco perche' e' meglio specificarlo nel markup

cosa devo cercare?
è verso la fine che sono riportati i comandi IE compatibili?
e cmq nella guida che mi hai indicato gentilmente, gli stili vengono dichiarati con setAttribute.

da qui in poi "Testando quest'ultimo esempio su più browser, i risultati sono differenti"
a leggerlo mi sembra abbastanza chiaro o va riscritta la guida?

ciao

[lyllo]

Originariamente inviato da Xinod
a leggerlo mi sembra abbastanza chiaro o va riscritta la guida?

avevo chiesto SOLO chiesto DOVE guardare, NON stavo criticando la guida.
non capisco il tono che mi pare polemico.

ad ogni modo, grazie, perchè ho risolto tutto quello che chiedevo in questo topic!

ora sia IE che FF fanno quello che dovrebbero.
guardando un pò in giro ho anche superato altri problemi tipo con gli eventi onclik che non vanno con IE.

insomma, grazie, anche perchè la guida E' stata UTILE, visto che ho copiato e capito e risolto i problemi!

PS: non è che mi fossi imputato con il TBODY e non volessi darti ascolto.
1) in Firefox funziona anche senza tbody e quindi avevo proseguito senza usarlo visto che:
2) seppure mettevo il tag <tbody id='pippo'></tbody> se andavo ad appendere usando i suggeriti getElementsByTagName("TBODY")[0] continuavo e CONTINUO a ricevere il messaggio undefined
3) ho risolto includendo i tag nel markup ed appendendo direttamente con
document.getElementById("id_tbody").appendChild(ri ghe).
4) a questo punto scusami se ti ho fatto irritare e quindi a maggior ragione grazie per avermi aiutato nonostante tutto.

[Xinod]

scusami tu, e' solo che ho la pazienza ai minimi storici e mi sembrava di ripetere nuovamente quanto gia' detto nell' altra discussione

[lyllo]

allora, ora praticamente sono riuscito a fare tutto.
posto il codice completo che può -se privo di errori di concetto- servire anche ad altri, visto che contiene diverse automazioni:
1) aggiunge una riga di intestazione
2) la aggiunge solo alla prima iterazione, per cui se vengono aggiunti altri campi non la rimette
3) c'è un node con un'immagine
4) input
5) cross-browsing per gli eventi onclick non gestiti da IE6>= ma gestiti bene da FF
6) creazione dinamica di campi in base ad un input dell'utente.

function stateChanged()	{ 

	if (xmlHttp.readyState==4 || xmlHttp.readyState == "complete"){ 
			res = xmlHttp.responseText;
			vett = res.split("|");			
		if(cont == 0){
			var col_h1 = document.createElement("TD"); 
			col_h1.style.backgroundImage = 'url(immagini/sfondo_tab.jpg)';
			col_h1.style.color = 'white';
			col_h1.style.fontSize = "10pt";	
			col_h1.innerHTML = "Nome Generato";
			var col_h2 = document.createElement("TD"); 
			col_h2.style.backgroundImage = 'url(immagini/sfondo_tab.jpg)';
			col_h2.style.color = 'white';
			col_h2.style.fontSize = "10pt";
			col_h2.innerHTML = "PNG Associato";
			var col_h3 = document.createElement("TD"); 
			col_h3.style.backgroundImage = 'url(immagini/sfondo_tab.jpg)';
			col_h3.style.color = 'white';
			col_h3.style.fontSize = "10pt";
			col_h3.innerHTML = "Salva";
			
			var riga_h = document.createElement("TR");

			riga_h.appendChild(col_h1);
			riga_h.appendChild(col_h2);
			riga_h.appendChild(col_h3);
			document.getElementById("nomi_generati").appendChild(riga_h);
			cont++;
			}

			for(var i=0; i < vett.length-1; i++){
				cont++;
				col = document.createElement("TD");
				col.style.width = '50%';
				col.setAttribute('valign','center');
				col.innerHTML = vett[i];
				
				col2 = document.createElement("TD");
				hid = document.createElement("INPUT");
				hid.setAttribute('type', 'hidden');
				hid.setAttribute('name', 'hid_nome_'+cont);
				hid.setAttribute('id', 'hid_nome_'+cont);
				hid.value = vett[i];
				
				inz = document.createElement("INPUT");
				inz.setAttribute('type', 'text');
				inz.setAttribute('name', 'nome_'+cont);
				inz.setAttribute('id', 'nome_'+cont);
				inz.setAttribute('class', "piccolo");
				inz.setAttribute('className', "piccolo");				
				
				col2.appendChild(hid);
				col2.appendChild(inz);
				
				col3 = document.createElement("TD");
				
				bro = getBrowser();
				if(bro == 'moz'){
					oImg=document.createElement("IMG");
					oImg.setAttribute('src', 'immagini/salva_nome.png');
					oImg.style.cursor = 'pointer';				
					oImg.setAttribute('onclick', 'ajax_nomi(hid_nome_'+cont+'.value,nome_'+cont+'.value);');
					col3. appendChild(oImg);
					}
				if(bro == 'ie'){
					col3.innerHTML = "[img]immagini/salva_nome.png[/img]";
					} 
				
				
				rg = document.createElement("TR");
				
				rg.appendChild(col);
				rg.appendChild(col2);
				rg.appendChild(col3);
				document.getElementById("nomi_generati").appendChild(rg);
				}

		}
}

c'è una cosa però bizzarra che accade solo con IE.
se creo un numero di righe superiori a 7 la tabella inizia a muoversi e si sposta verso il basso e non rimane li dove dovrebbe!
in firefox va tutto bene, in IE superato un certo numero di righe la tabella va giù.
i markup che la contengono sono i seguenti:

<tr><td colspan="2" ><div id='cont_tab' style=' height: 160px; overflow-y: auto;' >
						<table cellspacing='0' cellpadding='3px' align='center'><tbody id='nomi_generati'></tbody></table>
					</div>
</td></tr>

ciao ciao!

EDIT:
ho brutalizzato l'impaginazione

<div id='cont_tab' style='position: absolute; top: 210px; height: 155px; overflow-y: auto; width: 440px;' >

ora sta fermo :P