[DOM] Pb getElementById avec IE

**bud_gw** · 07/06/2006, 15h09

Bonjour à tous,
j'ai un prioblème avec la méthode getElementById. Comme d'habitude tout fonctionne sous Firefox mais pas avec IE.
J'ai donc un tableau définit comme ceci :

Code :

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

<table summary="Tableau" class="backup" id="save">

puis j'ai un bouton du genre :

Code :

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

<input name="but" type="button" value="pouet" onclick="javascript:displayorhide('champ','validate',1,'save')"></input>

Ensuite dans un .js j'ai ma fonction displayorhide qui commence comme ça :

Code :

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

1
2
3
4
5
6
7
function displayorhide(id,button,num_but,tab_id)
{
	div = document.getElementById(id);
	tab = document.getElementById(tab_id);
	but = document.getElementsByName(button);
.........
}

Après des tests avec des commentaires, c'est la ligne :
tab = document.getElementById(tab_id);
qui pose problème.
Pourtant le premier getElementById() fonctionne très bien, même sous IE.

J'ai également vérifié que je n'avait pas d'élément avec un name='save' car j'ai lu dans des précédents post que IE utilisait l'attribut name avec getElementById.
J'ai aussi tenté de mettre un attribut name à mon tableau et d'utliser le premier élément retourné par getElementsByName(). Mais la encore sous IE j'ai le message d'erreur : "Cet objet ne gère pas cette propriété ou cette méthode."

**KiLVaiDeN** · 07/06/2006, 15h15

Salut,

As-tu défini ton tableau en dynamique ? ( c'est à dire par un précédent innerHTML ? ou autre ? )

getElementById fonctionne normalement bien...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
  <table id="test">
    <tr>
      <td>
        <a href="javascript:alert(document.getElementById('test'))">test</a>
      </td>
    </tr>
  </table>
</body>
</html>

**bud_gw** · 07/06/2006, 15h24

hum en effet, mon tableau est définit par un innerHTML.
Est-ce que ça pose un problème à IE ? Je me disais que la fonction étant appelée après la création de la page cela ne devrait pas poser de problème. D'autant plus que cela marche sous Firefox.

**KiLVaiDeN** · 07/06/2006, 15h30

Chaque navigateur a sa propre implémentation du modèle DOM. Et dans le cas d'IE, innerHTML ne modifie pas l'arborescence DOM.

Tu vas être obligé de jouer avec les nodes de DOM et ajouter ton élément à la main... Cf cet article.

A+

**bud_gw** · 07/06/2006, 15h48

merci pour ta réponse et pour le lien (très instructif). En fait je fait exactement la même chose que ce qui est dit dans la partie : "Whither innerHTML?"
Je vais donc remplacer tout ça par des createElement et appendChild.
Cependant, il y a encore un truc qui me dérange pour la ligne :

Code :

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

but = document.getElementsByName(button);

Cette ligne ne pose pas de problème (même sous IE) alors que le bouton qui est utilisé est créé dans le même innerHTML que mon tableau ?

**ryan** · 07/06/2006, 16h14

Yop!

Il y a bien des choses étranges avec getElementsByName...
En voici un exemple:

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
 
<html>
<head>
<script type="text/javascript">
function get_test()
{
var x=document.getElementsByName("test")
alert(x.length + " elements")
}
</script>
</head>
<body>
<div name="test"></div>
<input name="test" type="text" <br>
<input name="test" type="text" <br>
<br>
<input type="button" onclick="get_test()" value="combien de 'test'?">
</body>
</html>

Ryan

**bud_gw** · 07/06/2006, 16h28

en effet c'est très curieux on dirait qu'il ne prend que les derniers éléments de même type.

En remplaçant mon innerHTML par des méthodes DOM j'obtiens encore le même type d'erreur sous IE (encore une fois ça marche bien sous FireFox).
Voici le code :

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
 
        tab=document.createElement("table"); 
	tab.setAttribute("summary","Tableau");
	tab.setAttribute("class","backup");
	tab.setAttribute("id","save");
	cap=document.createElement("caption")
	text=document.createTextNode("Sauvegardes");
	cap.appendChild(text);
	tab.appendChild(cap);
	row=document.createElement("tr");
	row.setAttribute("class","title");
	head=document.createElement("th");
	text=document.createTextNode("Date Insertion");
	head.appendChild(text);
	row.appendChild(head);
	head=document.createElement("th");
	text=document.createTextNode("Nom");
	head.appendChild(text);
	row.appendChild(head);
        tab.appendChild(row);
	container=document.getElementById("content");
	container.appendChild(tab);

Je suis loin d'avoir reconstruit tout mon tableau mais ça devrait au moins m'afficher mon caption et mes deux cellules d'en-têtes. Or j'ai toujours la même erreur sous IE : "Cet objet ne gère pas cette propriété ou cette méthode."

**FremyCompany** · 07/06/2006, 16h30

Envoyé par ryan

Yop!

Il y a bien des choses étranges avec getElementsByName...
En voici un exemple:

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
 
<html>
<head>
<script type="text/javascript">
function get_test()
{
var x=document.getElementsByName("test")
alert(x.length + " elements")
}
</script>
</head>
<body>
<div name="test"></div>
<input name="test" type="text" <br>
<input name="test" type="text" <br>
<br>
<input type="button" onclick="get_test()" value="combien de 'test'?">
</body>
</html>

Ryan

Peut-être que si il n'y avait pas de faute dans ton HTML ca irait mieux...

**bud_gw** · 07/06/2006, 16h31

je devrais peut-être préciser que tout ce code est généré par un script php qui est utilisé par un objet XmlHTTPRequest qui lui effectue un eval de ce qu'il reçoit.
voilà je ne sais pas si ça a une incidence.

**FremyCompany** · 07/06/2006, 16h34

Plutot que de se casser la tête avec des Id, pourquoi ne pas faire :

Code :

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

1
2
3
4
5
6
7
8
function Button_onClick(btt) {
   var nd = btt
   while (nd.tagName!="td") {nd=nd.parentNode;}
   var tab = nd
   while (nd.tagName!="table") {nd=nd.parentNode;}
   var table = nd
   // [...]
}

Code :

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

<input type="button" onclick="Button_onClick(this)" />

Je signalerais en passant que je ne suis pas sur qu'il soit prévu par W3C que les div aient des attributs name...

**bud_gw** · 07/06/2006, 16h42

j'avoue ne pas trop comprendre ta réponse Frémy.
Pour l'instant je cherche jsute à pouvoir créer un tableau à la volée de manière à pouvoir y accéder par la suite dans une fonction JS.
Le bouton dont je parlais au début fait en fait partie de mon tableau et me permet de lancer une fonction JS.

Mais bon pour le moment ce qui m'inquiète c'est que mon tableau ne s'affiche plus sous IE alors que ça marchait avec le innerHTML.

**SpaceFrog** · 07/06/2006, 16h45

pour préciser la pensée de fremy
si tu ne fermes pas tes balise input ...

<d

Code :

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

1
2
3
iv name="test"></div>
<input name="test" type="text" /> <br>
<input name="test" type="text"/> <br>

**FremyCompany** · 07/06/2006, 16h48

oui. Je voulais aussi dire que l'ID n'était pas le seul moyen de récupérer un tableau...
tu fais
DivContent.innerHTML = XmlHttpRequest.responseText
et puis, si tu veux récuperer tes objets, plutot que d'utiliser l'id, utilise le DOM !
Ma petite fonction permet de retrouver le TABLE, le TD et la TR qui contient le button....
C'était ca que tu faisait non ??

**ryan** · 07/06/2006, 16h50

Yop!

Envoyé par FremyCompany

Peut-être que si il n'y avait pas de faute dans ton HTML ca irait mieux...

Voui voui, certes, je fus un peu distrait, mais même en corrigeant le > manquant dans les tags input, le résultat est 2, alors qu'on pourrait s'attendre à 3.

Voici donc, pour la clarté du débat, le code corrigé:

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
 
<html>
<head>
<script type="text/javascript">
function get_test()
{
var x=document.getElementsByName("test")
alert(x.length + " elements!")
}
</script>
</head>
<body>
<div name="test"></div>
<input name="test" type="text" ><br>
<input name="test" type="text" ><br>
<br>
<input type="button" onclick="get_test()" value="combien de 'test'?">
</body>
</html>

Ryan
Grand, blond, et avec un chaussure noire.

**bud_gw** · 07/06/2006, 16h57

arf vi je suis d'accord SpaceFrog mais ce n'était pas de moi ce message.
Sinon Fremy, je suis d'accord ta solution de récupération est meilleure.

Cependant comme je le disais dans un précédent message j'ai maintenant un problème pour créer mon tableau avec les méthodes du DOM. En gros ça en marche pas sous IE (je commence à être habitué:-)).
D'un autre coté je n'utilise ces méthodes que depuis une demi-heure donc il est possible que je ne fasse pas les choses correctement.
Est-ce que ça vous semble correct ?

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
tab=document.createElement("table"); 
	tab.setAttribute("summary","Tableau");
	tab.setAttribute("class","backup");
	tab.setAttribute("id","save");
	cap=document.createElement("caption")
	text=document.createTextNode("Sauvegardes");
	cap.appendChild(text);
	tab.appendChild(cap);
	row=document.createElement("tr");
	row.setAttribute("class","title");
	head=document.createElement("th");
	text=document.createTextNode("Date Insertion");
	head.appendChild(text);
	row.appendChild(head);
	head=document.createElement("th");
	text=document.createTextNode("Nom");
	head.appendChild(text);
	row.appendChild(head);
        tab.appendChild(row);
	container=document.getElementById("content");
	container.appendChild(tab);

**SpaceFrog** · 07/06/2006, 16h57

Non en fait simplement la balise div ne supporte pas la propriété name voilà tout ...

**FremyCompany** · 07/06/2006, 17h10

SpaceFrog confirme donc ce que je pensais...
Pour le code de création de table par DOM, je vois qqchose qui pourait être la source du pb...
Pour attribuer un ID à un élément, utilser TAB.id="id" est préférable, si ce n'est même obligatoire...
Ca pourrait peut-être arranger le pb...

**bud_gw** · 07/06/2006, 17h21

apparemment le problème ne vient pas de là. Avec tab.id="save"
j'obtiens le même résultat qu'avec setAttribute.

**KiLVaiDeN** · 07/06/2006, 17h23

de quelle méthode parle l'erreur ?

**bud_gw** · 07/06/2006, 19h58

le problème c'est que la ligne de l'erreur est la ligne à laquelle je fais l'eval() du responseText du XmlHTTPRequest. Ce qui est normal. En tant normal quand ça se produit j'arrive à debugger grâce à différents plugins de Firefox. Or là l'erreur ne se produit pas sur Firefox.
Je suis désolé, je ne pourrais pas être plus précis car je ne suis plus devant le code.
En tout cas d'après vous ça devrait marcher ?
Sinon je vais essayer de me faire un petit exemple simple chez moi. Si ça marche ça voudra dire que l'erreur est ailleurs.

Je laisse le post en non résolu encore un petit moment au cas où quelqu'un aurait quelque chose à ajouter.

Merci à tous.

[DOM] Pb getElementById avec IE

JavaScript

Discussions similaires

Partager

Partager