[DOM] Pb getElementById avec IE

Version imprimable

07/06/2006, 15h09
bud_gw

[DOM] Pb getElementById avec IE
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:

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

puis j'ai un bouton du genre :

Code:

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

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."
07/06/2006, 15h15
KiLVaiDeN
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:

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>
07/06/2006, 15h24
bud_gw

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.
07/06/2006, 15h30
KiLVaiDeN

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+
07/06/2006, 15h48
bud_gw

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:

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 ?

Yop!

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

Code:

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

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:

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."

Citation:
Envoyé par ryan
Yop!

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

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

07/06/2006, 16h31
bud_gw

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.

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

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:

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

07/06/2006, 16h42
bud_gw

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.
07/06/2006, 16h45
SpaceFrog
pour préciser la pensée de fremy
si tu ne fermes pas tes balise input ...

<d
Code:

1 2 3 iv name="test"></div> <input name="test" type="text" /> <br> <input name="test" type="text"/> <br>
07/06/2006, 16h48
FremyCompany

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

Yop!

Citation:

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:

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.

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:

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

07/06/2006, 16h57
SpaceFrog

Non en fait simplement la balise div ne supporte pas la propriété name voilà tout ...
07/06/2006, 17h10
FremyCompany

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...
07/06/2006, 17h21
bud_gw

apparemment le problème ne vient pas de là. Avec tab.id="save"
j'obtiens le même résultat qu'avec setAttribute.
07/06/2006, 17h23
KiLVaiDeN

de quelle méthode parle l'erreur ?
07/06/2006, 19h58
bud_gw

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.
07/06/2006, 21h33
FremyCompany

pk ne pas génerer ton HTML en PHP ?
07/06/2006, 23h19
bud_gw

parce qu'en fait mon tableau sert à afficher les résultats de requête sur une base. C'est pour ça que j'utilise XmlHTTPRequest. Comme l'utilisation de l'outil necessite que des requêtes sur la base soient effectuées souvent, ça permet de ne pas toujours avoir à recharger entièrement la page (ça peut être très pénible au bout d'un moment).

Je sais bien qu'en théorie XmlHTTPRequest est fait pour renvoyer de l'XML mais je me sens plus à l'aise en renvoyant du code JS évalué.
10/06/2006, 09h53
sekaijin

Citation:

Envoyé par FremyCompany

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

il est plus efficace de passer par responseXML. en effet la réponse est alors un arbre DOM il suffit alors de récupérer le noeud approprié et de faire un append. l'arbre DOM de la page se trouve alors à jour.

Alors qu'avec InnerHTML ce n'est pas très sur

A+JYT
10/06/2006, 10h18
FremyCompany

Mouais... et dès que tu fais [[<table border=1 >]] ton responseXML, il vaut undefined...

En plus certains navigateurs ne supporte pas l'ajout par DOM d'un noeud d'un document (responseXML) vers un autre (document), même après utilisation de cloneNode...

Alors je ne vois pas ce qu'il y a de plus sur à passer par XML...
;)

rebonjour à tous,
comme prévu j'ai fait un essai de création de tableau avec un code un peu plus simple que ce que j'avais avant, histoire de pouvoir mieux identifier le problème.
J'ai encore le même soucis avec IE.
Voici, mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Intracsa -  Gestion des Plans de Sauvegarde</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-15" />
</head>
<body>
<div id="sauv">
</div>
<script type="text/javascript">
tab=document.createElement("table"); 
tab.setAttribute("summary","Tableau des sauvegardes");
 
cap=document.createElement("caption");
text=document.createTextNode("Sauvegardes");
cap.appendChild(text);
tab.appendChild(cap);
 
row=document.createElement("tr");
 
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);
 
head=document.createElement("th");
text=document.createTextNode("Date");
head.appendChild(text);
row.appendChild(head);
 
head=document.createElement("th");
text=document.createTextNode("Fréquence");
head.appendChild(text);
row.appendChild(head);
 
tab.appendChild(row);
 
container=document.getElementById("sauv");
container.appendChild(tab);
</script>
 
</body>
</html>

En fait sous Firefox comme d'habitude tout est nickel alors que sous IE seul le caption apparait.
J'imagine que le problème vient encore de l'interprétation que fait IE des fonctions JS. Dans ce cas comment manipuler le DOM sous IE ?

12/06/2006, 10h51
bud_gw

rectification,
en fait ça marche, il fallait juste ajouter une balise tbody, j'ai trouvé ça en fouillant un peu dans le forum. Apparemment IE à besoin qu'on ajoute un tbody quand on crée un tableau avec les fonctions du DOM.
C'est quand même bizarre parce que quand on utilise un innerHTML ou quand on définit directement le tableau en HTML, la balise tbody n'est pas necessaire.
M'enfin...
12/06/2006, 11h06
KiLVaiDeN

Citation:

Envoyé par bud_gw

rectification,
en fait ça marche, il fallait juste ajouter une balise tbody, j'ai trouvé ça en fouillant un peu dans le forum. Apparemment IE à besoin qu'on ajoute un tbody quand on crée un tableau avec les fonctions du DOM.
C'est quand même bizarre parce que quand on utilise un innerHTML ou quand on définit directement le tableau en HTML, la balise tbody n'est pas necessaire.
M'enfin...

Faut dire que manipuler le DOM, et utiliser le "rendering" par défaut du navigateur ( qui est sollicité quand tu mets directement un <table>, il génère le DOM "à sa sauce" derrière ) sont deux choses différentes :)

IE est bizarre quand même....

A+ =)
12/06/2006, 11h42
bud_gw

après moult test, il semblerait que IE ne permette pas de faire un eval() d'une fonction telle que createElement() dans un objet XmlHttpRequest.
Ca m'embete beaucoup et c'est plutôt rageant parce que mon appli fonctionne comme je veux sous firefox.
Je pense que je vais être obligé d'utiliser le responseXML.
09/03/2007, 13h31
pc.bertineau

je ressors un vieux sujet :

j'ai eu moi aussi un pb avec un getElementById qui me renvoyait une erreur "cet objet ne gère pas cette propriété et/ou cette méthode", pour un select qui était écrit "en dur" sur mon code html.

j'ai changé

Code:

ch3 = document.getElementById('champ3');

en

Code:

var ch3 = document.getElementById('champ3');

et IE6 ne me sort plus d'erreur...

Tous mes autres getElementById sont pourtant codés sans la mention 'var' et marchent quand même.. incompréhensible mais si ça peut en aider certains..