Partage
  • Partager sur Facebook
  • Partager sur Twitter

probleme innerHTML et DOM

    28 novembre 2010 à 17:24:48

    Bonjour les zéros, voila j'ai deux problème a exposer
    je commence par donner un petit résume de mon projet
    l'objectif est d'insérer des ligne d'un formulaire dynamiquement, à chaque fois que je clique sur un bouton , une nouvelle ligne s'insère au dessus de la précédente, et toute les lignent contiennent (zone de texte + 2 liste déroulante + 2 zone de texte + un lien pour supprimer), dans un premier temps, j'ai utilisé innerHTML c'est tellement facile avec (insertion du code directement, associer les fonctions aux evenemnt ajouter des espacement entre les composant) bref c'était du gâteau avec,CEPENDANT comme Mateo a dit, cette fonction est propriétaire de IE(Merci Microsoft ^^) et elle ne fonctionne pas correctement sur Mozilla FF, le problème c'est quand je clique pour insérer une ligne, les ligne précédente sont réinitialisé comme si je les réinsère (les champs que j'ai rempli sont vidé ainsi que mes listes déroulantes reviennent a l'option Selected) alors que je n'ai pas ce problème sur IE.
    j'ai essayé de faire l'insertion avec DOM (hyper long mais bien structuré), et c'est là que je rencontre mes deux fameux problème dont j'ai besoin de votre aide les Zéro!
    premier problème : comment insérer un espacement entre les objet que j'ai fait apparaitre ?
    2éme problème : comment associer des fonction à paramètre a des evenet relié a des objets que j'ai fait apparaitre, dans le tuto il y a addEventListener/addAttachement mais ils prennent pas en compte le paramètre passé à la fonction, les fonction de type fonction() marche bien, par contre ceux de type fonction(para1,para2,para3..) ne trouve pas les paramètre associé.
    voila en attendant votre réponse je vous souhaite une excellente soirée
    • Partager sur Facebook
    • Partager sur Twitter
      28 novembre 2010 à 17:51:25

      Faut éviter innerHTML.
      Le DOM te permet de garder les events et de ne pas tout reparser.

      Et donnes ton code ;)
      • Partager sur Facebook
      • Partager sur Twitter
        28 novembre 2010 à 19:47:15

        Alors.

        1) Utilise le CSS (margin), c'est le seul secret :p

        2) Le plus simple reste quand même d'utiliser directement les raccourcis de type "onclick", "onfocus", etc.

        ton_element.onclick = function(e) {
            ta_fonction('param1','param2');
        };
        


        ;)
        • Partager sur Facebook
        • Partager sur Twitter
          28 novembre 2010 à 19:57:28

          oui je l'évite toujours mais elle est la seule qui me permet d'ajouter du code pure dans la page surtout quand mon formulaire est assez gros (des liste déroulante qui contiennent des dizaine d'options) pour faire avec DOM faut une journée entière pour écrire les option et leur donner des valeur et après les appendChild, malgré ça j'ai quand même foncé et pris courage et fait le code, mais je me retrouve face a un probleme d'espacement entre composante (il me faut des en masse ^^ et j'arrive pas a les insére par DOM, soit il m'afficher rien, soit il l'interprète pas et il m'affiche "", par contre pour ceux qui ont le même problème que moi je viens de trouver la solution, c'est mélanger DOM et innerHTML, voila mon ancien code qui ne fonctionnait pas sous FF:

          var n=0;
          function inserer(){
          var Div_Insertion = document.getElementById("Div d'insertion");
          Div_Insertion.innerHTML += '<div id="ligne'+n+'">mon formulaire ici</div>
          n++;
          }
          


          et voila le code qui fonctionne

          var n=0;
          function inserer(){
          var Div_Insertion = document.getElementById("Div d'insertion");
          var maLigne = document.createElement("div");
          maLigne.setAttribute("id","ligne"+n);
          // et voila la fameuse innerHTML qui revient 
          maLigne.innerHTML = 'mon formulaire ici sans le div enveloppant'
          Div_Insertion.appendChild(maLigne);
          n++;
          
          • Partager sur Facebook
          • Partager sur Twitter

          probleme innerHTML et DOM

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown