innerHTML ne fonctionnant pas avec IE

Version imprimable

Bonsoir,

J'ai un table qui contient plusieurs tbody.

Un de ces tbody a l'id "co_author"

Code:

<tbody id="co_author">

Dans ce Tobdy, j'aimerais insérer 3 zones de textes, j'appelle donc sur le clic d'un bouton une fonction nommée Add_Co_Author.

Code:

<td><input type="button" value="Add CO-AUTHOR" onClick="Add_Co_Author();"></td>

Voici le code de ma fonction :
Code:

1 2 3 4 5 6 7 8 9 function Add_Co_Author() { if(global_numero_auteur < 13) { document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>'; } global_numero_auteur+=1; }
J'arrive dans la fonction, global_numero_auteur vaut 4 quand j'arrive dans la fonction (je l'ai vérifié par une alerte).

Le problème doit venir du innerHTML.

Auriez-vous une autre solution fonctionnant avec IE ?

Edit :

J'ai aussi testé ceci mais sans succès :
Code:

1 2 3 4 5 6 7 8 9 10 11 function Add_Co_Author() { contenu_precedent = new String(document.getElementById('co_author').innerHTML); //alert(global_numero_auteur); if(global_numero_auteur < 13) { document.getElementById('co_author').innerHTML = contenu_precedent.concat('<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>'); } global_numero_auteur= global_numero_auteur+1; }
En tout cas, avec Firefox, cela fonctionne parfaitement.

Merci d'avance.

beegees

21/02/2010, 20h50
javatwister

un ptit parseInt, pour vérifier que ta variable est bien numérique? :roll:
21/02/2010, 23h25
AcidLines

Cela ne viendrait pas du "+" a droite de ton innerHTML ? :

Code:

document.getElementById('co_author').innerHTML+=...
22/02/2010, 09h22
Gatsu35

<TABLE>.innerHTML
<TBODY>.innerHTML
<SELECT>.innerHTML
<TR>.innerHTLM
provoquent des erreur sous IE, c'est con, mais c'est comme ça.
22/02/2010, 10h28
beegees

Citation:

Envoyé par javatwister

un ptit parseInt, pour vérifier que ta variable est bien numérique? :roll:

Salut,

J'ai fait une alerte typeof et il m'indique "number".

Le problème ne viendrait donc pas de là.

Encore merci.

beegees

Citation:

Envoyé par AcidLines

Cela ne viendrait pas du "+" a droite de ton innerHTML ? :

Code:

document.getElementById('co_author').innerHTML+=...

Salut,

Avec ou sans +, ça ne fonctionne pas.

J'ai essayé :

Code:

document.getElementById('co_author').innerHTML ='teste';

Sans succès.

Merci pour ton aide.

beegees

Citation:

Envoyé par Gatsu35

<TABLE>.innerHTML
<TBODY>.innerHTML
<SELECT>.innerHTML
<TR>.innerHTLM
provoquent des erreur sous IE, c'est con, mais c'est comme ça.

Salut,

Merci pour ta réponse.

Je dois alors utiliser le DOM (création de TR, TD...) ? ou as-tu une autre solution ?

Encore merci

beegees
22/02/2010, 10h34
le_chomeur

Salut Beegees ;-)

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

aurais tu un code un peu plus complet de ce que tu souhaites faire ?
22/02/2010, 10h36
Bovino

Citation:

Envoyé par le_chomeur

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

Si, c'est possible.
Ce sont les thead et tfoot qui doivent être uniques ;)

Citation:

Envoyé par le_chomeur

Salut Beegees ;-)

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

aurais tu un code un peu plus complet de ce que tu souhaites faire ?

Salut Chomy,

Merci pour ta réponse.

Voici ce que je devrais obtenir :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
			<td class="important">CO-AUTHOR 1</td>
		</tr>
		<tr>
			<td>FIRST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50"	onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>LAST NAME<span class="asterix">*</span></td><td align="left" class="td_abstracts"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>
		<tr>
			<td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor='yellow'" onblur="this.style.backgroundColor='white'"></td>
		</tr>

Encore merci à toi.

beegees

22/02/2010, 10h38
beegees

Citation:

Envoyé par Bovino

Si, c'est possible.
Ce sont les thead et tfoot qui doivent être uniques ;)

Merci pour cette confirmation Bovino ;)

beegees

Bon pour répondre à tout ça :
dans un <table> : thead et tfoot sont uniques, et on peut avoir plusieurs tbody.

comme je l'ai dit les innerHTML pètent sous IE :(
le seul pb c'est qu'il faut passer par le dom, mais tout en conservant la possibilité de ne pas avoir à trop taper sur le code existant.

donc je te propose :
au lieu de faire :

Code:

1
2
3
4
5
 
if(global_numero_auteur < 13)
	{
		document.getElementById('co_author').innerHTML+= '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>';
	}

tu fais

Code:

1
2
 
addHTML(document.getElementById('co_author'), '<tr><td class="important">CO-AUTHOR '+global_numero_auteur+'</td></tr><tr><td>FIRST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>LAST NAME<span class="asterix">*</span></td><td align="left"><input type="text" size="50"></td></tr><tr><td>INSTITUTION/AFFILIATION<span class="asterix">*</span></td><td align="left"><input type="text" size="50" onfocus="this.style.backgroundColor=\'yellow\'" onblur="this.style.backgroundColor=\'white\'"></td></tr>');

En utilisant ces deux fonctions

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function setInnerHTML(elm, str) {
	try {
		elm.innerHTML = str;
	} catch(e) {
		var div = document.createElement('div');
		div.innerHTML = str;
		//vide elm
		while(elm.firstChild) {
			elm.removeChild(elm.firstChild);
		}
		//add child from div to the element
		while(div.firstChild) {
			elm.appendChild(div.firstChild);
		}
	}	
}
function addHTML(elm, str) {
	var html = elm.innerHTML;
	setInnerHTML(elm, html + str);
}

22/02/2010, 11h39
SpaceFrog

Citation:

dans un array : thead et tfoot sont uniques, et on peut avoir plusieurs tbody.

:mouarf:
y'a des thead des tbody et tfoot dans des arrays ??

table != array
22/02/2010, 11h46
le_chomeur

Citation:

je ne crois pas qu'il puisse il y avoir plusieurs tbody dans un tableau :-/

je n'en suis donc pas sur ;)

Bon sinon je ne pense pas que le problème vienne de innerHTML mais plutôt de la string passé en paramètre...

Beegees , peux tu fournir en pièce jointe un exemple complet ?
22/02/2010, 11h46
beegees

Salut et merci pour ta réponse Gatsu35,

Vraiment très intéressant.

Si je comprends bien, au moment où il rencontre une erreur, il crée le table avec le DOM ?

Voici ce que ça donne :

Voir image attachée

CO-AUTHOR 4FIRST NAME* sont sur la même ligne, penses-tu que l'on peut régler ce problème ?

Le plus important serait d'aligner les input text.

Encore merci pour ce très beau code :ccool:

beegees
22/02/2010, 11h47
Gatsu35

Citation:

Envoyé par le_chomeur

Bon sinon je ne pense pas que le problème vienne de innerHTML mais plutôt de la string passé en paramètre...

le pb vient de innerHTML, pour avoir déjà eu à faire à ce pb durant les 3 dernieres années au moins 20 ou 30 fois

innerHTML fait péter une erreur sous IE quand tu essaye de le modifier sur un élément tel que : table, select, tr, tfoot, tbody, thead

doit y avoir d'autres éléments
22/02/2010, 11h55
SpaceFrog

D'ou ma méfiance férocement ancrée d'utiliser le innerHTML pour ajouter des éléments dynamiqueemnt au pied de biche dans une page HTML.

L'utilisation du DOM est certes plus lourde, mais au moins àprès il n'y a pas de mauvaises surprises. Les navigateurs reconnaissent leurs petits !
22/02/2010, 12h02
le_chomeur

Gatsu35 effectivement , renseignement pris , le tbody est en readonly via innerHTML :)

Obligation de passer par le dom beegees :)
22/02/2010, 12h44
beegees

Citation:

Envoyé par le_chomeur

Gatsu35 effectivement , renseignement pris , le tbody est en readonly via innerHTML :)

Obligation de passer par le dom beegees :)

Merci pour la confirmation chomy.

beegees