Problème Javascript InnerHTML avec firefox

Problème Javascript InnerHTML avec firefox - HTML/CSS - Programmation

Marsh Posté le 20-04-2005 à 15:55:15    

:hello:
 
J'ai encore un problème avec mes InnerHTML, je comprend pas trop
Je vous explique : j'ai créé un formulaire où si l'utilisateur veut uploader un fichier, il clique sur un petit lien qui fait apparaitre un champ <input type="file"> pour uploader son fichier. Si il change d'avis, il peut cliquer sur un autre lien pour retirer ce champ de formulaire. Ca fonctionne impeccable sous Internet Explorer, et là je teste sous Firefox, et ça ne marche qu'à moitié...
A moitié, parce qu'en fait si je clique une fois sur mon lien, ça va bien afficher mon formulaire, et si je clique sur le lien pour virer le champ, ça ne le vire pas et ça affiche en plus le lien pour afficher un nouveau champ...
 
Je vous donne mon code :
 
La page HTML (en fait une page en PHP) :

Code :
  1. <div id="formChampGauche">
  2.       R&eacute;ponse 1 : <input type="checkbox" id="bonnerep1" name="bonnerep1" onChange="setModifie();" value="1"><br>
  3.       <textarea id="rep1" name="rep1"rows="3" cols="34" onChange="setModifie();"></textarea>
  4.       <div id="uploadReponse1">
  5.             <a href="#" onClick="afficheChampUpload('uploadReponse1');">Ins&eacute;rer une image</a><br>
  6.       </div><hr>
  7. </div>


 
La première fonction Javascript, pour faire apparaitre le champ file :

Code :
  1. function afficheChampUpload(whatdiv)
  2. {
  3.    document.getElementById(""+whatdiv+"" ).innerHTML="<input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"10000000\">\n<input type=\"file\" name=\""+whatdiv+"\" id=\""+whatdiv+"\" size=\"30\" onChange=\"setModifie();\"><a href=\"#\" onClick=\"afficheTextUpload('"+whatdiv+"'); \">Retirer l'image</a>\n";
  4. }


 
La seconde fonction Javascript, pour faire disparaitre ce champ file :

Code :
  1. function afficheTextUpload(whatdiv)
  2. {
  3.    document.getElementById(""+whatdiv+"" ).innerHTML="<a href=\"#\" onClick=\"afficheChampUpload('"+whatdiv+"'); \">Ins&eacute;rer une image</a>";
  4. }


 
Voilà. J'ai pas mal cherché avant de poster. Peut-être j'utilise des fonctions JavaScript qui sont propriétaires Microsoft, mais je vois vraiment pas où...
Et que pensez-vous des balises <div> imbriquées dans le code HTML ? C'est correct ou pas ? le navigateur ne risque pas de se mélanger le pinceaux ?
 
Merci de votre aide, je galère dessus depuis ce matin  :pt1cable:


Message édité par rat dgout le 20-04-2005 à 15:57:05
Reply

Marsh Posté le 20-04-2005 à 15:55:15   

Reply

Marsh Posté le 20-04-2005 à 16:01:31    

[:mlc]
1- ce code est extrèmement crade
2- pourquoi cacher l'input?
3- pourquoi utiliser ""+whatdiv+"" alors que whatdiv suffirait?
4- pourquoi tant de divs (surtout à l'intérieur d'un form)?
5- pourquoi tant d'IDs?
6- Pourquoi ne pas utiliser le DOM?
 
http://www.howtocreate.co.uk/tutorials/index.php?tut=0
http://www.quirksmode.org/


Message édité par masklinn le 20-04-2005 à 16:01:48

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 16:03:23    

[:ciler]
le javascript est un langage a part entiere, arretez de le considerer comme un truc de bidouilleurs


---------------
IVG en france
Reply

Marsh Posté le 20-04-2005 à 16:05:14    

Haaaa, si les interpréteurs JS des browsers étaient moins permissifs... Voilà ce qui arrive à trop laisser le champs libre...

Reply

Marsh Posté le 20-04-2005 à 16:05:52    

uriel a écrit :

[:ciler]
le javascript est un langage a part entiere, arretez de le considerer comme un truc de bidouilleurs


Tiens au fait, tu connaîtrais pas un module qui permette de transformer du texte en un arbre DOM (genre comme innerHTML mais pire :o)
 
Parce que j'en ai besoin et j'ai rien trouvé, donc je vais me lancer dans le dev du bouzin ( :sweat: ) mais si je peux récupérer un module bien fait à côté, bien voilà quoi


Message édité par masklinn le 20-04-2005 à 16:06:02

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 16:07:33    

non, je connais pas :/


---------------
IVG en france
Reply

Marsh Posté le 20-04-2005 à 16:08:21    

uriel a écrit :

non, je connais pas :/


Bon ben j'vais me lancer dedans, et transformer du XML textuel en arbres XML-DOM à grand coup de JS [:benou_miam]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 16:09:09    

'fin ca me parait bizarre que personne ait deja fait ca quand meme :??:
avec une xslt peut etre :D


---------------
IVG en france
Reply

Marsh Posté le 20-04-2005 à 16:12:19    

Tu peux pas instancier un parser XML qui te fasse tout ça ? C'est un peu ça, non ?

Reply

Marsh Posté le 20-04-2005 à 16:12:58    

masklinn a écrit :

[:mlc]
1- ce code est extrèmement crade
2- pourquoi cacher l'input?
3- pourquoi utiliser ""+whatdiv+"" alors que whatdiv suffirait?
4- pourquoi tant de divs (surtout à l'intérieur d'un form)?
5- pourquoi tant d'IDs?
6- Pourquoi ne pas utiliser le DOM?
 
http://www.howtocreate.co.uk/tutorials/index.php?tut=0
http://www.quirksmode.org/


 
Merci pour ta réponse rapide  :jap:  
1- Aie aie aie tu trouves ça crade toi ? Qu'est-ce qui fait crade ?
2- Je voulais cache le input file dans le cas ou il n'y aurait pas d'image à uploader (en fait je suis en stage et je développe un générateur de quizz pour les profs d'une université. Or une question de quizz n'est pas forcément que du texte, cela peut être aussi du texte+une image ou juste une image. Du coup, j'avais pensé à le cacher le champ et à le créer seulement si ils en ont besoin.
3- Corrigé, merci c'est vrai c'était bête
4 et 5- Pas mal de div, car en fait un quizz est composé d'un nombre indéterminé de questions. Le prof peut en ajouter à la volée. Et donc j'utilise des <div id="..."> pour pouvoir faire un "document.getElementById" sur l'id du div et donc rajouter des champs grâce au Javascript.
6- Ah, je croyais que c'était du DOM mon truc  :heink: , ben je vais mater tes tutoriels, c'est surement pour ca que ça déconne mon truc

Reply

Marsh Posté le 20-04-2005 à 16:12:58   

Reply

Marsh Posté le 20-04-2005 à 16:24:54    

uriel a écrit :

'fin ca me parait bizarre que personne ait deja fait ca quand meme :??:
avec une xslt peut etre :D


Nah, c'est pour créer un semi-éditeur de XML, donc il faut que le mec ait accès au XML dans le document et que le dit XML soit parsé, affiché (de manière lisible) et modifié par le JS, si celui-ci est activé (en gros, XML chargé dans une textbox et ensuite on construit un affichage type EditInPlace)

FlorentG a écrit :

Tu peux pas instancier un parser XML qui te fasse tout ça ? C'est un peu ça, non ?


C'est exactement ça, mais j'ai pas trouvé de parsers XML en JS [:spamafote]  

rat dgout a écrit :

Merci pour ta réponse rapide  :jap:  
1- Aie aie aie tu trouves ça crade toi ? Qu'est-ce qui fait crade ?


Mélange de HTML et JS, c'est un espèce de gros fouilli/bordel, sans aucune séparation entre l'information (le HTML) et le comportement (le JS)

Citation :

2- Je voulais cache le input file dans le cas ou il n'y aurait pas d'image à uploader (en fait je suis en stage et je développe un générateur de quizz pour les profs d'une université. Or une question de quizz n'est pas forcément que du texte, cela peut être aussi du texte+une image ou juste une image. Du coup, j'avais pensé à le cacher le champ et à le créer seulement si ils en ont besoin.


Mouais.
Dans l'idéal, pour une accessibilité maximale, mieux vaudrait créer un champ d'upload par défaut (dans le HTML), le cacher au chargement de la page et ensuite un lien pour le faire réapparaître ou pas, mais même là c'est tout juste cosmétique, le fait qu'il y ait un champ restant vide n'est pas à mon sens extrèmement gênant.

Citation :

4 et 5- Pas mal de div, car en fait un quizz est composé d'un nombre indéterminé de questions. Le prof peut en ajouter à la volée. Et donc j'utilise des <div id="..."> pour pouvoir faire un "document.getElementById" sur l'id du div et donc rajouter des champs grâce au Javascript.


un ID et les fonctions du DOM ça devrait suffir

Citation :

6- Ah, je croyais que c'était du DOM mon truc  :heink: , ben je vais mater tes tutoriels, c'est surement pour ca que ça déconne mon truc


nope, de toute façon 90% du temps quand "InnerHTML" apparaît c'est pas du DOM (on pourrait dire que les deux sont concurrents, ils permettent de faire des trucs proches même si certaines capacités d'InnerHTML ne sont quasi pas faisable en DOM, et si pas mal de trucs du DOM sont complètement irréalisable sans)
 
Enfin bon tu vas avoir pas mal de boulot, une utilisation correcte et "propre" du Javascript c'est pas toujours aisé, de même pour le DOM.
Je te conseille aussi de bien bûcher le HTML et les CSS (va voir les liens dans ma signature, ça pourra te servir), car le but du JS/DOM n'est "que" de modifier le comportement du fichier HTML et des éléments, il faut donc créer du code propre avant d'avoir la moindre chance de pouvoir monter du JS correct derrière


Message édité par masklinn le 20-04-2005 à 16:26:33

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 16:28:44    

masklinn a écrit :

C'est exactement ça, mais j'ai pas trouvé de parsers XML en JS [:spamafote]


http://xmljs.sourceforge.net/index.html :??:

Reply

Marsh Posté le 20-04-2005 à 16:32:24    

masklinn a écrit :

Mélange de HTML et JS, c'est un espèce de gros fouilli/bordel, sans aucune séparation entre l'information (le HTML) et le comportement (le JS)

Citation :

2- Je voulais cache le input file dans le cas ou il n'y aurait pas d'image à uploader (en fait je suis en stage et je développe un générateur de quizz pour les profs d'une université. Or une question de quizz n'est pas forcément que du texte, cela peut être aussi du texte+une image ou juste une image. Du coup, j'avais pensé à le cacher le champ et à le créer seulement si ils en ont besoin.


Mouais.
Dans l'idéal, pour une accessibilité maximale, mieux vaudrait créer un champ d'upload par défaut (dans le HTML), le cacher au chargement de la page et ensuite un lien pour le faire réapparaître ou pas, mais même là c'est tout juste cosmétique, le fait qu'il y ait un champ restant vide n'est pas à mon sens extrèmement gênant.

Citation :

4 et 5- Pas mal de div, car en fait un quizz est composé d'un nombre indéterminé de questions. Le prof peut en ajouter à la volée. Et donc j'utilise des <div id="..."> pour pouvoir faire un "document.getElementById" sur l'id du div et donc rajouter des champs grâce au Javascript.


un ID et les fonctions du DOM ça devrait suffir

Citation :

6- Ah, je croyais que c'était du DOM mon truc  :heink: , ben je vais mater tes tutoriels, c'est surement pour ca que ça déconne mon truc


nope, de toute façon 90% du temps quand "InnerHTML" apparaît c'est pas du DOM (on pourrait dire que les deux sont concurrents, ils permettent de faire des trucs proches même si certaines capacités d'InnerHTML ne sont quasi pas faisable en DOM, et si pas mal de trucs du DOM sont complètement irréalisable sans)
 
Enfin bon tu vas avoir pas mal de boulot, une utilisation correcte et "propre" du Javascript c'est pas toujours aisé, de même pour le DOM.
Je te conseille aussi de bien bûcher le HTML et les CSS (va voir les liens dans ma signature, ça pourra te servir), car le but du JS/DOM n'est "que" de modifier le comportement du fichier HTML et des éléments, il faut donc créer du code propre avant d'avoir la moindre chance de pouvoir monter du JS correct derrière


 
OK, merci, je vais suivre ton conseil pour le champ d'upload, c'est vrai que ça ne dérange pas...
 
Et c'est vrai que mon code JS est un peu poussif, je vais retravailler ça  :(  
 
Quand au CSS, j'aimerai bien en faire là pour le projet, mais le problème c'est que mon application doit être intégrée sur l'intranet de l'université existant déjà, et qui utilise à ma grande déception des frame  :fou:  et pas de feuilles de style  :ange:  
 
Bon, je revois ma copie. merci des conseils !!!

Reply

Marsh Posté le 20-04-2005 à 16:35:34    


 [:figti]  
 
Faut que je regarde si il ressort des nodes utilisables via les fonctions dom de JS

rat dgout a écrit :

Quand au CSS, j'aimerai bien en faire là pour le projet, mais le problème c'est que mon application doit être intégrée sur l'intranet de l'université existant déjà, et qui utilise à ma grande déception des frame  :fou:  et pas de feuilles de style  :ange:


Pas un problème, t'es dans ta frame à toi, tu utilises des CSS sur ton bout de page qui s'affiche dans ta frame, et tu ignores royalement le reste du frameset [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-04-2005 à 16:42:00    

masklinn a écrit :

[:figti]  
Pas un problème, t'es dans ta frame à toi, tu utilises des CSS sur ton bout de page qui s'affiche dans ta frame, et tu ignores royalement le reste du frameset [:spamafote]


Ouai en fait t'as carrément raison je crois... Merci encore !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed