innerHTML ne fonctionnant pas avec IE

**beegees** · 21/02/2010, 19h32

Bonsoir,

J'ai un table qui contient plusieurs tbody.

Un de ces tbody a l'id "co_author"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Voici le code de ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**javatwister** · 21/02/2010, 20h50

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

**AcidLines** · 21/02/2010, 23h25

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Gatsu35** · 22/02/2010, 09h22

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

**beegees** · 22/02/2010, 10h28

Envoyé par javatwister

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

Salut,

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

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

Encore merci.

beegees

Envoyé par AcidLines

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Salut,

Avec ou sans +, ça ne fonctionne pas.

J'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sans succès.

Merci pour ton aide.

beegees

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

**le_chomeur** · 22/02/2010, 10h34

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 ?

**Bovino** · 22/02/2010, 10h36

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

**beegees** · 22/02/2010, 10h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**beegees** · 22/02/2010, 10h38

Envoyé par Bovino

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

Merci pour cette confirmation Bovino

beegees

**Gatsu35** · 22/02/2010, 11h28

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

**SpaceFrog** · 22/02/2010, 11h39

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

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

table != array

**le_chomeur** · 22/02/2010, 11h46

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 ?

**beegees** · 22/02/2010, 11h46

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

beegees

**Gatsu35** · 22/02/2010, 11h47

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

**SpaceFrog** · 22/02/2010, 11h55

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 !