Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di lyllo
    Registrato dal
    Apr 2001
    Messaggi
    832

    [JS] Compatibilità DOM con IE

    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?

    codice:
    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

  2. #2
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    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

  3. #3
    Utente di HTML.it L'avatar di lyllo
    Registrato dal
    Apr 2001
    Messaggi
    832
    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!

  4. #4
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    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

  5. #5
    Utente di HTML.it L'avatar di lyllo
    Registrato dal
    Apr 2001
    Messaggi
    832
    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.


  6. #6
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    scusami tu, e' solo che ho la pazienza ai minimi storici e mi sembrava di ripetere nuovamente quanto gia' detto nell' altra discussione

  7. #7
    Utente di HTML.it L'avatar di lyllo
    Registrato dal
    Apr 2001
    Messaggi
    832
    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.

    codice:
    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:
    codice:
    <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
    codice:
    <div id='cont_tab' style='position: absolute; top: 210px; height: 155px; overflow-y: auto; width: 440px;' >
    ora sta fermo :P

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.