erreur causée par la méthode appendChild() avec IE

**hastiok** · 02/12/2009, 17h47

Bonjour à tous,
J'ai un probleme sous IE6 en utilisant la méthode appendChild(objet).
J'ai testé sous firefox et chrome et sa marche sauf que avec IE (6,7 et 8) je suis bloqué.
Voici mon code:

Code :

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

1
2
3
4
5
6
7
8
9
pic = new Image();
		pic.id = "img_thumb_"+id;
		//pic.name = "img_thumb_"+id;
		pic.src = "get_mini_image.php?archId="+id;
		pic.style.display = "block";
		pic.style.position = "absolute";
    pic.style.top = "10%";
    pic.style.left = "64%";
    parent.document.getElementById("table_principal").appendChild(pic);

Merci d'avance pour votre aide.

**Bovino** · 02/12/2009, 19h33

Salut.

Essaye en ajoutant les styles après l'insertion :

Code :

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

1
2
3
4
5
6
7
8
9
pic = new Image();
pic.id = "img_thumb_"+id;
//pic.name = "img_thumb_"+id;
pic.src = "get_mini_image.php?archId="+id;
parent.document.getElementById("table_principal").appendChild(pic);
pic.style.display = "block";
pic.style.position = "absolute";
pic.style.top = "10%";
pic.style.left = "64%";

**hastiok** · 02/12/2009, 23h03

Je vois pas pour qu'elle raison le responsable du développement web du developpez.com s'en fout de ma gueule.
C'est très respectueux de ta part Monsieur !!!

**Bovino** · 03/12/2009, 08h12

Il faut voir à arrêter un peu la parano et comprendre que pour IE, positionner en absolute un élément qui n'est pas insérer dans le DOM peut être problématique, ce que je te propose de contourner en affectant le style (donc le positionnement) une fois ton élément ajouté dans le DOM.

**vermine** · 03/12/2009, 08h16

Bonjour,

Je vois que vous prenez l'id "table_principal" (il y a une faute d'orthographe mais passons), je suppose donc que vous vous accrochez à une balise:

Code :

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

1
2
 
<table id="table_principal">

Peut-être devez-vous attacher l'élément à une cellule du tableau ?

Code :

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

1
2
3
4
5
6
 
<table id="table_principal">
<tr>
   <td id="cellule_principale"></td>
</tr>
</table>

**SpaceFrog** · 03/12/2009, 08h44

Oui je trouve aussi que cela relève de la paranoïa ...

Bovino tente juste d'aider ...

Bref !

Tu essayes d'insérer dans une balise table ?
N'ayant pas le html on ne peut que le supposer au vu de l'id ...
Il faut alors appender dans le thead ou tbody du table, et même si dans ton code html tu ne l'as pas précisé, pour IE ils existent

**hastiok** · 04/12/2009, 11h31

Bonjour messieurs,
Je vous remercie pour vos répliques qui m'ont données des nouvelles pistes...mais toujours sans aucune résultat.
Pour mieu vous exposer le probleme je vous fournit le code du tableau parent [Composant auquel je lui applique le appendChild]:

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
22
23
<table class="table_navigation_principale"  >
		<tbody id="table_principal">
		<tr>
			<!--<td class="td_navigation_principale" id="ttRich" style="width:310px; border-right: 1px solid #D9DEE2;">-->
			<td class="td_navigation_principale" id="ttRich" style="width:230px;">
			..............	
			</td>
			<!--<td class="td_navigation_principale" style="width:100px; text-align:right; padding-right:10px; border-right: 1px solid #D9DEE2;">-->
			<td class="td_navigation_principale" style="width:100px; text-align:right; padding-right:10px;">	
             ................			
			</td>
			<td class="td_navigation_principale" style="width:120px;">
			.................
			</td>
		</tr>
		<tr >
	<tr >
 <td colspan="3" style="padding:0px;" valign="top" visibility="visible" >
   ...................
</td>
</tr>
</tbody>
	</table>

Merci d'avance pour votre aide

**hastiok** · 04/12/2009, 11h35

Envoyé par hastiok

Je vois pas pour qu'elle raison le responsable du développement web du developpez.com s'en fout de ma gueule.
C'est très respectueux de ta part Monsieur !!!

Babino, je suis vraiment tres désolé, j'ai pas fait attention et j'ai pensé que ce code ci dessous correspand aux styles d'insertion dont tu m'a parlé.

#Bovino{
chambreur: max;
cassant: repeatedly;
mechant: never;
competent: none !important;
}

**vermine** · 04/12/2009, 12h08

Je ne sais pas pq mais j'ai testé de l'accrocher à (un seul à la fois bien entendu):

Code :

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

1
2
3
4
5
6
7
8
9
 
//1
<table id="table_principal">
//2
<tbody id="table_principal">
//3
<tr id="table_principal">
//4
<td id="table_principal">

Et seul le td me fait apparaitre l'image.

**kernelfailure** · 04/12/2009, 12h18

C'est la première fois que je vois Image être utilisé comme un Node.

Je suis surtout surpris que cela fonctionne sous certains navigateurs.
Donc, on peut aussi envisager un appendChild avec Array, Date, Number ?

Pour être plus clean, remplace ton new Image() par un document.createElement('IMG').

Pas d'insertion possible de tag IMG dans un TBODY. Un TD ou un TH, oui. Sinon, le résultat risque d'être improbable.

**E.Bzz** · 04/12/2009, 12h28

Bonjour,

Envoyé par kernelfailure

Pas d'insertion possible de tag IMG dans un TBODY. Un TD ou un TH, oui. Sinon, le résultat risque d'être improbable.

+1

Ce qui n'empêche pas de suivre la recommandation de Babino

A+

**vermine** · 04/12/2009, 12h34

+1 varnime qui dit depuis le début de l'attacher au <td>.

Hein, E.baa.

Par contre, je veux bien connaitre les inconvénients d'un new Image(), même si dans ce cas-ci j'aurais de toute manière fait un createElement.

**E.Bzz** · 04/12/2009, 12h41

Envoyé par vermine

+1 varnime qui dit depuis le début de l'attacher au <td>.

Hein, E.baa.

Exact, mais tu as quand même pris la peine de tester les 3 précédents

Envoyé par vermine

Par contre, je veux bien connaitre les inconvénients d'un new Image(), même si dans ce cas-ci j'aurais de toute manière fait un createElement.

Ben contrairement à <IMG> c'est un objet Javascript, pas HTML ...
(comme Array, Integer ... cf. kernelfailure)

A+

**Bovino** · 04/12/2009, 13h29

Attention aux confusions avec new Image()

Le tableau Images est une propriété de l'objet document, donc new Image() crée en fait un élément HTML de type img !

Code :

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

1
2
alert(new Image())  // => [object HTMLImageElement]
alert(new Image().tagName)  // => 'IMG', même avec IE6 !!!

**E.Bzz** · 04/12/2009, 13h55

Oups !

Au temps pour moi

**kernelfailure** · 04/12/2009, 16h28

Idem

Merci pour cette correction

**hastiok** · 05/12/2009, 21h01

Bonjour Messieurs,

Pour éviter les problèmes que peut causer l'utilisation d'un tableau avec la méthode appendChild, j'ai utilisé dans la page parente une balise DIV au lieu du tableau que je lui applique appendChild comme suit:
parent.document.getElementById("id_du_div").appendChild(pic);.
Maintenant ca marche avec IE8 (ca qui n'été pas le cas avant), sauf que avec ie6 c'a marche pas

.Notre client exige absolument que c fonctionne avec IE6.
Est ce que ya un moyen ou une autre piste à essayer. Je suis pret à m'investir dans n'importe qu'elle proposition pour que cela fonctionne.
Merci d'avance

**hastiok** · 13/12/2009, 19h35

Bonjour à tous,
Finalement j'ai réussi à résoudre mon probleme.
En fait l'ors de la création de l'élément image et en essayant les deux alternatives:
pic = new Image(); et pic = document.createElement('IMG');
J'avais toujours le même souci avec IE6 !!!
Apres qq jours j'ai trouvé le secret du mystérieu message:"Argument inavalide" quand j'utilise la méthode appendChild.
Il a fallu crée l'élément comment suit:
pic = parent.document.createElement('IMG');

Merci à vous tous pour votre aide.

erreur causée par la méthode appendChild() avec IE

JavaScript

Discussions similaires

Partager

Partager