Ajouter des elements de facon dynamique
Le
Olivier Miakinen
[ publication croisée sur fciwa et fclj, suivi sur fcl.javascript ]
Bonjour,
Je suis en train de reprendre un code JavaScript un peu vieillot, et
j'aimerais le moderniser tout en l'améliorant.
En particulier, j'essaye de faire la chose suivante : au moment de la
génération de la page HTML, rajouter N <div> dans un formulaire, chaque
<div> (appelons-le "conteneur") contenant la chose suivante :
- un <input type="checkbox"> suivi d'une ligne de texte ;
- un <button type="button"> ;
- un autre <div> (appelons-le "details") contenant des détails sur
l'ensemble.
Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.
Je ne tiens pas particulièrement à ce que cela fonctionne sur Netscape 4
ou Internet Explorer 4, mais je voudrais que cela marche au moins sur
les navigateurs modernes (Netscape 7, Mozilla, Opera, ) sans oublier
Internet Explorer 6.
La première version du code JavaScript générait le HTML à coups de
document.write() ou document.writeln() mais cela ne me semble pas très
propre, et j'aimerais bien utiliser plutôt des trucs du genre de
document.createElement(), xxx.appendChild(), etc. si c'était possible.
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6. Comment avancer ?
Note : si la réponse est RTFM, je veux bien, mais justement je cherche
un bon manuel. Le meilleur que j'aie trouvé jusqu'à présent est
<http://fr.selfhtml.org/> mais je n'y ai pas trouvé de spécifications
complètes. Je n'arrive pas non plus à trouver sur <http://www.w3.org>.
--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.
Bonjour,
Je suis en train de reprendre un code JavaScript un peu vieillot, et
j'aimerais le moderniser tout en l'améliorant.
En particulier, j'essaye de faire la chose suivante : au moment de la
génération de la page HTML, rajouter N <div> dans un formulaire, chaque
<div> (appelons-le "conteneur") contenant la chose suivante :
- un <input type="checkbox"> suivi d'une ligne de texte ;
- un <button type="button"> ;
- un autre <div> (appelons-le "details") contenant des détails sur
l'ensemble.
Mon idée est que cliquer sur le bouton appelle une fonction JavaScript
qui va ouvrir ou fermer le <div> "details" en changeant sa propriété
style.display.
Je ne tiens pas particulièrement à ce que cela fonctionne sur Netscape 4
ou Internet Explorer 4, mais je voudrais que cela marche au moins sur
les navigateurs modernes (Netscape 7, Mozilla, Opera, ) sans oublier
Internet Explorer 6.
La première version du code JavaScript générait le HTML à coups de
document.write() ou document.writeln() mais cela ne me semble pas très
propre, et j'aimerais bien utiliser plutôt des trucs du genre de
document.createElement(), xxx.appendChild(), etc. si c'était possible.
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6. Comment avancer ?
Note : si la réponse est RTFM, je veux bien, mais justement je cherche
un bon manuel. Le meilleur que j'aie trouvé jusqu'à présent est
<http://fr.selfhtml.org/> mais je n'y ai pas trouvé de spécifications
complètes. Je n'arrive pas non plus à trouver sur <http://www.w3.org>.
--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.
Poser une question
Et document.getElementById('toto').style.display = 'none' (ou block), ça ne
fonctionne pas ?
--
A'tchao
Le Fou
http://perso.club-internet.fr/ehiller/
http://club.exocet.free.fr/
http://www.ffessm-cd84.com/
Si j'ai bien compris les div sont ajoutés par script ? Dans ce cas, je
suggérerai d'en inclure un caché (display: none) et de le cloner autant
de fois que nécessaire (il existe une méthode DOM cloneNode() pour cela),
changer l'attribut id du nouveau div et l'insérer dans le document
Cela fonctionne sur tous les navigateurs cités plus bas.
Surprenant ! IE6 supporte les méthodes citées. Les problèmes surviennent
principalement dans l'ajout d'attributs, en particulier les gestionnaires
d'événements pour lesquels il vaut mieux utiliser une syntaxe (conforme
au DOM2 HTML si l'élément accepte ces attributs) du type
elt.onclick=function(){//le code}, plutôt que d'utiliser
setAttribute("onclick", "//le code") ou encore les méthodes dédiées aux
gestionnaires d'événements DOM2 qui ne sont pas supportées par IE6.
Sur w3.org je conseillerai le DOM2 Core et le DOM2 HTML pour leur
annexe "ECMAScript Language Binding". Le DOM2 Event Model est intéressant
mais n'est absolument pas implémenté dans IE6...
--
Y.D.
tu as donc cloneNode pour "cloner" ton div de base
et dans la foulée, avant de le placer, tu peux
jouer avec le clone pour en changer tout ce que tu veux.
Finalement tu le displaies et le visibilises
Bien sûr mon IE (5.1 vieux Mac) a un peu ses vapeurs sur ces trucs
un peu modernes pour lui, mais avec Mozilla ça baigne.
IE : On a un peu besoin de coder à l'ancienne pour les modifs du clone
et donc pour faire propre (et prèt pour le futiur-présent)
on double le code (le cracra pour IE le nodal pour les autres)
comme dit + haut : si ça n'marche pô faut doubler le code
(à mon idée)
On le faisait bien à l'époque des NC4 et IE4 ...
pourtant il m'avait semblé qu'avec cloneNode et/ou appendChild
sur Google on avait le choix de l'info
Des spécifications ?
me semble que selfhtml a une page où *tout* est dit, c'est complet.
http://www.toutenligne.com/document...s/node.htm
Ne reste qu'à apprivoiser la chose ;-)
D'ailleurs, ils disent bien que rien n'oblige à tout faire par cette voie,
si c'est plus facile ou plus vite fait autrement : faut l'faire.
Si fait ! Si fait ! C'est autre chose qui ne fonctionne pas. D'ailleurs
je vais répondre à YD sur ce point car c'est lui ou elle qui a signalé
un problème, ainsi qu'une ébauche de solution.
Je n'ai pas encore essayé cela, mais je vais regarder une fois que
j'aurai réglé le premier problème.
Ok.
Eh bien voilà exactement mon problème. J'ai essayé tout un tas de trucs,
la plupart ne fonctionnant pas du tout, certains ne fonctionnant que sur
Mozilla. Des trois seuls essais qui fonctionnent sur IE (dont deux qui
fonctionnent aussi sur Mozilla), aucun ne m'a permis de passer un
paramètre variable.
element2.onclick = "Dynamique(1)"; // rien
element2.onclick = "Dynamique()"; // rien
element2.setAttribute("onclick", "Dynamique(1)"); // Moz seul
element2.setAttribute("onclick", "Dynamique"); // rien
element2.onclick = Dynamique; // les deux
element2.onclick = eval("Dynamique("+1+")"); // trop tôt
element2.onclick = eval("eval(Dynamique("+1+"))"); // trop tôt
element2.onclick = 'eval("Dynamique("'+1+'")")'; // rien
element2.setAttribute("onclick", Dynamique); // IE seul
element2.addEventListener("click", Dynamique, true); // Moz seul
element2.onclick=function(){ Dynamique(1); }; // les deux
Tu noteras que le dernier essai est celui de ta réponse. Bon, en fait,
j'ai fini par trouver une solution, mais qui me semble tellement laide
que je me demande si on ne peut vraiment pas l'améliorer :
eval("element2.onclick=function(){ Dynamique("+idx+"); }");