Discussion :

[Melex]

Bonjour à tous,

Je souhaite modifier le DOM d'une page afin d'obtenir un tableau. Ce tableau contient des patients avec un bouton voir qui affiche leurs informations dans une autre page.

Mon problème c'est que si je mets un formulaire en javascript, le tableau ne s'assemble pas correctement à l'affichage.

Voici la structure du tableau

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table>
 <thead>
  <tr>
   <th>Nom</th>
   <th>Prénom</th>
   <th>Id</th>
   <th>Voir</th>
  </tr>
 </thead>
 <tbody>
 </tbody>
</table>

et ce que j'y insère

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var nouveauElmtForm = document.createElement("FORM");
nouveauElmtForm.setAttribute("target","fiche_patient");
nouveauElmtForm.setAttribute("value","submit");
nouveauElmtForm.setAttribute("action","../../Fenetre_principale/Fiche_patient/fiche_patient.php");
nouveauElmtForm.setAttribute("method","post");
 
var nouveauElmtTr = document.createElement("TR");
 
var nouveauElmtNom = document.createElement("TD");
nouveauElmtNom.innerHTML = liste[i].patient.nom;
 
var nouveauElmtPrenom = document.createElement("TD");
nouveauElmtPrenom.innerHTML = liste[i].patient.prenom;
 
var nouveauElmtInput = document.createElement("INPUT");
nouveauElmtInput.setAttribute("name","id");
nouveauElmtInput.setAttribute("value",liste[i].patient.id);
nouveauElmtInput.setAttribute("type","hidden");
 
var nouveauElmtId = document.createElement("TD");
nouveauElmtId.appendChild(nouveauElmtInput);
var tmp = nouveauElmtId.innerHTML;
nouveauElmtId.innerHTML = tmp + liste[i].patient.id;
 
var nouveauElmtVoir = document.createElement("TD");
var nouveauElmtInput = document.createElement("INPUT");
nouveauElmtInput.setAttribute("name","affich");
nouveauElmtInput.setAttribute("src","../../images/fleche.png");
nouveauElmtInput.setAttribute("value","submit");
nouveauElmtInput.setAttribute("type","image");
nouveauElmtVoir.appendChild(nouveauElmtInput);
 
nouveauElmtTr.appendChild(nouveauElmtSexe);
nouveauElmtTr.appendChild(nouveauElmtNom);
nouveauElmtTr.appendChild(nouveauElmtPrenom);
nouveauElmtTr.appendChild(nouveauElmtAge);
nouveauElmtTr.appendChild(nouveauElmtId);
nouveauElmtTr.appendChild(nouveauElmtVoir);
 
_completeListe.appendChild(nouveauElmtTr);
_completeListe.appendChild(nouveauElmtForm);

Le problème n'arrive pas si j'enlève le formulaire ( mais je n'ai plus de moyen de récupérer l'ID et d'afficher les informations ).

Avez une solution à me proposer ?

Merci pour vos réponses.

Mélanie

[E.Bzz]

Avez une solution à me proposer ?

Oui, dans les Contributions

A+

[Melex]

La seule différence que je vois est

au lieu de

Code :

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

monInput.setAttribute("type","text");

c'est

Code :

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

monInput.type = "text";

Cela changerait-il quelque chose ?

(Je n'ai plus mon programme avec moi, je testerais demain)

[Bovino]

La différence peut sembler plus théorique que pratique au premier abord.

Tout d'abord, il faut garder en mémoire la différence entre un document HTML et son modèle DOM.
Au chargement de la page, tu obtiens un document HTML, à savoir un ensemble de balises contenant des attributs.
Ce document génère un modèle JavaScript constitué d'objets JavaScript de type HTMLElement.
Chaque objet HTMLElement possède un ensemble de propriétés correspondant aux attributs valides de cet élément.
Chaque changement d'un attribut d'une balise génère un changement de la propriété JavaScript de l'objet HTMLElement associé et inversement, chaque modification d'une propriété JavaScript est répercutée dans le modèle HTML (à peu de chose près, voir les cas de l'attribut name par exemple qui est readonly pour IE ).
Donc à première vue, les deux syntaxes sont équivalentes, sauf qu'il me semble plus élégant et plus conforme, lorsqu'on utilise JavaScript, de modifier des propriétés JavaScript que des attributs HTML, mais c'est juste un point de vue.
Là où ça se complique, c'est lorsque l'on veut ajouter des propriétés autres que celles définies par le modèle DOM (ce qui est autorisé en JavaScript, on peut à loisir ajouter des propriétés et des méthodes à un objet) ou lorsqu'on utilise des attributs HTML non conformes. Dans ces cas là, il n'existe plus de pont entre les deux...
Voir ce test pour s'en convaincre :

Code html :

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 checkAttr(){
                alert(document.getElementById('monTest').toto);
        }
        function addAttr(){
                document.getElementById('monTest').tata = "attribut ajouté";
                alert(document.getElementById('monTest').getAttribute('tata'));
        }
</script>
</head>
 
<body>
	<div id="monTest" toto="tata">Cette balise div possède un attribut "toto"</div>
	<input type="button" onclick='checkAttr()' value="Tester l'attribut toto" />
	<input type="button" onclick='addAttr()' value="Ajouter un attribut" />
</body>
</html>

[E.Bzz]

Cela changerait-il quelque chose ?

Là c'est à toi de nous dire

Par contre, si je te donnais ce lien, c'était plutôt pour gérer ce problème-ci :

(l'attribut name par exemple qui est readonly pour IE ).

qui semble être à l'origine de tes soucis (je me base sur le fait que le problème disparait lorsqu'il n'y a plus de <form> ... or un name n'a d'impact que dans un <form>).

A+

[Melex]

C'est d'accord. Message passé.

Je vais modifier les propriétés Javascript plutôt que les attributs HTML.

Cela ne résout malheureusement pas mon problème .

Si je mets mon "TR" dans mon "FORM", toutes les infos (nom, prénom, id, etc) s'affichent "sous" la colonne nom.

Et c'est bien mon "FORM" qui pose problème car si je l'enlève, tout s'affiche correctement .

En HTML le problème ne se pose pas, alors pourquoi en Javascript ? Et y a-t-il un moyen de le résoudre ?

(Je suis actuellement sous Chrome, et mon application n'est pas un site internet, je peux donc imposer le navigateur aux utilisateurs, et je ne leur imposerait pas IE )

[SpaceFrog]

name n'est apparemment plsu readonly pour IE8
sinon il y a ce qu'il faut pour y remedier dans les contributiuons:
http://www.developpez.net/forums/d53...ynamique-form/

attention également il faut appender dans les thead et le tbody
pour la construction de tableau avec DOM
http://www.developpez.net/forums/d47...us-rapidement/

[Melex]

D'accord. J'ai pris en compte tout ça.
J'append bien dans les thead et tbody.
Ce qui semble poser problème, c'est que je rajoute un form pour englober chacun de mes tr.
Et c'est quand je rajoute ce form que le tableau ne se forme pas correctement.
Est-ce que cela est dû au fait que le javascript ne gère pas les form dans les table?

[E.Bzz]

Est-ce que cela est dû au fait que le javascript ne gère pas les form dans les table?

Disons plutôt que l'imbrication form/table peut être sujette à problème.

Pour une bonne compatibilité, mieux vaut que la table soit contenu dans le form.

Code html :

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

1
2
3
4
5
<form ...>
<table>
...
</table>
</form>

Sinon, le form peut être contenu entier dans un <td>.

Code html :

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

1
2
3
4
5
6
...
<td>
<form>
...
</form>
</td>

Les autres tentatives causent en général des erreurs (suivant les nav) ...

EDIT (oui, j'ai oublié l'essentiel ) : Or, dans ton cas, tu sembles l'ajouter entre le dernier <tr></tr> et le </table>

Code :

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

1
2
_completeListe.appendChild(nouveauElmtTr);
_completeListe.appendChild(nouveauElmtForm);

A+

[Melex]

J'ai trouvé mon problème!
Je mettais mon form dans un tr et non dans un td.
Le problème venait surement de là.

Merci beaucoup en tout cas!

[E.Bzz]

J'ai trouvé mon problème!
Je mettais mon form dans un tr et non dans un td.
Le problème venait surement de là.

C'est ce qu'il me semblait avoir expliqué ci-dessus

A+