[ 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.
Finalement, entre la surveillance de mes filles, le repas, et une soirée concert, le « tout de suite » s'est transformé en « six heures plus tard ». Quoi qu'il en soit, cela marche finement. Je suis de plus en plus persuadé que je vais pouvoir remplacer les « document.write » par des accès propres au DOM, même pour Internet Explorer !
Un grand merci encore à tous ceux qui m'ont répondu : le Fou, ASM, Cléo, et surtout YD.
Le 20/11/2004 17:54, je répondais à YD :
J'écrirai donc plutôt :
element2.onclick=Function("Dynamique("+idx+");");
Excellent, j'essaye tout de suite.
Finalement, entre la surveillance de mes filles, le repas, et une soirée
concert, le « tout de suite » s'est transformé en « six heures plus
tard ». Quoi qu'il en soit, cela marche finement. Je suis de plus en
plus persuadé que je vais pouvoir remplacer les « document.write » par
des accès propres au DOM, même pour Internet Explorer !
Un grand merci encore à tous ceux qui m'ont répondu : le Fou, ASM, Cléo,
et surtout YD.
Finalement, entre la surveillance de mes filles, le repas, et une soirée concert, le « tout de suite » s'est transformé en « six heures plus tard ». Quoi qu'il en soit, cela marche finement. Je suis de plus en plus persuadé que je vais pouvoir remplacer les « document.write » par des accès propres au DOM, même pour Internet Explorer !
Un grand merci encore à tous ceux qui m'ont répondu : le Fou, ASM, Cléo, et surtout YD.
Je n'avais même pas pensé que l'on peut cliquer sur autre chose qu'un bouton ! Plus exactement je l'avais oublié, puisque j'ai vu un exemple de ce genre sur le site selfhtml.
J'ai testé sur ie6, netscape 7, opera 7, firefox 1.0, mozilla 1.7, k-meleon 0.8.2 ... par contre je ne suis pas sûr que ça corresponde à ton problème ...
En effet, ce n'était pas exactement mon problème, mais en ce moment tout exemple de code propre est le bienvenu.
J'aurais aimé passer plusieurs semaines à me former au JavaScript avant de mettre les mains dans le cambouis, mais il se trouve que je suis un peu pressé par le temps comme souvent dans les entreprises. Or je tiens absolument à faire les choses le plus proprement possible, dans le temps qui m'est imparti.
Ce qui m'em...derait le plus, ce serait qu'on garde du code mal fichu sous prétexte qu'on n'a pas le temps de l'améliorer... mais grâce à vous tous j'ai confiance que je vais arriver au bout.
Je n'avais même pas pensé que l'on peut cliquer sur autre chose qu'un
bouton ! Plus exactement je l'avais oublié, puisque j'ai vu un exemple
de ce genre sur le site selfhtml.
J'ai testé sur ie6, netscape 7, opera 7, firefox 1.0, mozilla 1.7, k-meleon
0.8.2 ...
par contre je ne suis pas sûr que ça corresponde à ton problème ...
En effet, ce n'était pas exactement mon problème, mais en ce moment tout
exemple de code propre est le bienvenu.
J'aurais aimé passer plusieurs semaines à me former au JavaScript avant
de mettre les mains dans le cambouis, mais il se trouve que je suis un
peu pressé par le temps comme souvent dans les entreprises. Or je tiens
absolument à faire les choses le plus proprement possible, dans le temps
qui m'est imparti.
Ce qui m'em...derait le plus, ce serait qu'on garde du code mal fichu
sous prétexte qu'on n'a pas le temps de l'améliorer... mais grâce à vous
tous j'ai confiance que je vais arriver au bout.
Je n'avais même pas pensé que l'on peut cliquer sur autre chose qu'un bouton ! Plus exactement je l'avais oublié, puisque j'ai vu un exemple de ce genre sur le site selfhtml.
J'ai testé sur ie6, netscape 7, opera 7, firefox 1.0, mozilla 1.7, k-meleon 0.8.2 ... par contre je ne suis pas sûr que ça corresponde à ton problème ...
En effet, ce n'était pas exactement mon problème, mais en ce moment tout exemple de code propre est le bienvenu.
J'aurais aimé passer plusieurs semaines à me former au JavaScript avant de mettre les mains dans le cambouis, mais il se trouve que je suis un peu pressé par le temps comme souvent dans les entreprises. Or je tiens absolument à faire les choses le plus proprement possible, dans le temps qui m'est imparti.
Ce qui m'em...derait le plus, ce serait qu'on garde du code mal fichu sous prétexte qu'on n'a pas le temps de l'améliorer... mais grâce à vous tous j'ai confiance que je vais arriver au bout.
Amicalement, Olivier
Olivier Miakinen
Le 20/11/2004 19:12, YD me répondait :
[...] Chacune des cinq lignes suivantes fonctionne avec Mozilla, mais aucune avec Internet Explorer :
Désolé de te contredire, tout ces écritures fonctionnent dans IE !
Désolé ? Comment ça désolé ? Mais je suis positivement ravi que tu me contredises ! :-D
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild après le setAttribute, alors que je ne l'avais pas précisé dans mon article. Je te dois vraiment de grands remerciements pour tout le temps que tu as passé à m'aider.
Amicalement, Olivier Miakinen
Le 20/11/2004 19:12, YD me répondait :
[...] Chacune des cinq lignes suivantes
fonctionne avec Mozilla, mais aucune avec Internet Explorer :
Désolé de te contredire, tout ces écritures fonctionnent dans IE !
Désolé ? Comment ça désolé ? Mais je suis positivement ravi que tu me
contredises ! :-D
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est
que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre
HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le
insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild
après le setAttribute, alors que je ne l'avais pas précisé dans mon
article. Je te dois vraiment de grands remerciements pour tout le temps
que tu as passé à m'aider.
Désolé de te contredire, tout ces écritures fonctionnent dans IE !
Désolé ? Comment ça désolé ? Mais je suis positivement ravi que tu me contredises ! :-D
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild après le setAttribute, alors que je ne l'avais pas précisé dans mon article. Je te dois vraiment de grands remerciements pour tout le temps que tu as passé à m'aider.
Amicalement, Olivier Miakinen
Cléo
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne marche malheureusement pas avec IE6.
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0, Mozilla 1.7, k-meleon 0.8. Je pense cette fois, que ça correspond à ton besoin notamment par rapport l'implementation du onclick.
<html> <head> <script type="text/javascript"> <!-- function addElt(elt) { var doc = elt.ownerDocument;
var div = doc.createElement("div"); var chb = doc.createElement("input"); var but = doc.createElement("input"); var spn = doc.createElement("span"); var txt = doc.createTextNode("détail");
chb.setAttribute("type","checkbox"); but.setAttribute("type","button"); but.setAttribute("value","X"); but.onclick = new Function("toggle(this);");
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne
marche malheureusement pas avec IE6.
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0,
Mozilla 1.7, k-meleon 0.8.
Je pense cette fois, que ça correspond à ton besoin notamment par rapport
l'implementation du onclick.
<html>
<head>
<script type="text/javascript">
<!--
function addElt(elt)
{
var doc = elt.ownerDocument;
var div = doc.createElement("div");
var chb = doc.createElement("input");
var but = doc.createElement("input");
var spn = doc.createElement("span");
var txt = doc.createTextNode("détail");
chb.setAttribute("type","checkbox");
but.setAttribute("type","button");
but.setAttribute("value","X");
but.onclick = new Function("toggle(this);");
J'ai réussi à faire marcher la chose dans Netscape 7, mais cela ne marche malheureusement pas avec IE6.
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0, Mozilla 1.7, k-meleon 0.8. Je pense cette fois, que ça correspond à ton besoin notamment par rapport l'implementation du onclick.
<html> <head> <script type="text/javascript"> <!-- function addElt(elt) { var doc = elt.ownerDocument;
var div = doc.createElement("div"); var chb = doc.createElement("input"); var but = doc.createElement("input"); var spn = doc.createElement("span"); var txt = doc.createTextNode("détail");
chb.setAttribute("type","checkbox"); but.setAttribute("type","button"); but.setAttribute("value","X"); but.onclick = new Function("toggle(this);");
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0, Mozilla 1.7, k-meleon 0.8. Je pense cette fois, que ça correspond à ton besoin notamment par rapport l'implementation du onclick. [...]
Oui, en effet. Vive le nextSibling ! si je vois que cela simplifie mon code je vais l'adopter sans réserve.
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0,
Mozilla 1.7, k-meleon 0.8.
Je pense cette fois, que ça correspond à ton besoin notamment par rapport
l'implementation du onclick.
[...]
Oui, en effet. Vive le nextSibling ! si je vois que cela simplifie mon
code je vais l'adopter sans réserve.
J'ai testé ce qui suit avec succès sur IE6, netscape7, opera 7, Firefox 1.0, Mozilla 1.7, k-meleon 0.8. Je pense cette fois, que ça correspond à ton besoin notamment par rapport l'implementation du onclick. [...]
Oui, en effet. Vive le nextSibling ! si je vois que cela simplifie mon code je vais l'adopter sans réserve.
ASM
Le 20/11/2004 19:12, YD me répondait :
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est
que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild après le setAttribute,
Cela rejoint mon histoire de double code ! Donc au vu de la remarque de YD (et de mémoire) il me semblerait donc que ce double codage ne serait plus necessaire si on prend la précaution proposée.
Ce ne serait donc pas que IE ne comprend pas les setAttribute et z'autres mais qu'il faille les lui donner à son bon vouloir. (pourquoi ne pas faire autrement que les autres qd on sort de chez M$?)
Bref! Encore une fois merci à YD qui sait touj trouver une réf ou une doc (et l'interpréter).
-- ******************************************************* Stéphane MORIAUX et son vieux Mac Aide Pages Perso (images & couleurs, formulaire, CHP) http://perso.wanadoo.fr/stephane.moriaux/internet/ *******************************************************
Le 20/11/2004 19:12, YD me répondait :
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est
que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre
HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le
insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild
après le setAttribute,
Cela rejoint mon histoire de double code !
Donc au vu de la remarque de YD (et de mémoire)
il me semblerait donc que ce double codage ne serait plus necessaire
si on prend la précaution proposée.
Ce ne serait donc pas que IE ne comprend pas les setAttribute et z'autres
mais qu'il faille les lui donner à son bon vouloir.
(pourquoi ne pas faire autrement que les autres qd on sort de chez M$?)
Bref! Encore une fois merci à YD qui sait touj trouver
une réf ou une doc (et l'interpréter).
--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************
Mais je me suis aperçu d'une bizarrerie grâce à ton problème, c'est
que cela ne fonctionne *qu'après* avoir inséré la checkbox dans l'arbre HTML ! [...]
Seule parade donc positionner le checked après le appendChild ou le insertBefore.
Bien vu ! En plus, tu as bien deviné que j'avais fait le appendChild après le setAttribute,
Cela rejoint mon histoire de double code ! Donc au vu de la remarque de YD (et de mémoire) il me semblerait donc que ce double codage ne serait plus necessaire si on prend la précaution proposée.
Ce ne serait donc pas que IE ne comprend pas les setAttribute et z'autres mais qu'il faille les lui donner à son bon vouloir. (pourquoi ne pas faire autrement que les autres qd on sort de chez M$?)
Bref! Encore une fois merci à YD qui sait touj trouver une réf ou une doc (et l'interpréter).
-- ******************************************************* Stéphane MORIAUX et son vieux Mac Aide Pages Perso (images & couleurs, formulaire, CHP) http://perso.wanadoo.fr/stephane.moriaux/internet/ *******************************************************
