Partage
  • Partager sur Facebook
  • Partager sur Twitter

appendChild et createElement

Sujet résolu
    8 mars 2010 à 21:54:37

    Bonsoir,

    Tout d'abord je tiens à préciser que je me base sur ce tutoriel et de ce fait ne soyez pas étonnés de voir le code identique (je m'entraîne dessus !).

    Mon but est de pouvoir rajouter à un formulaire de type <select> et plus précisément aux options <option value=''></option> un autre attribut en plus de value. Par exemple un attribut name ou encore id.

    En effet, j'aimerai pouvoir vérifier certaines conditions à partir de cet attribut reçu en même temps que la génération du formulaire effectuée par XMLHttpRequest de la méthode AJAX.

    function readData(oData) {
    	var nodes   = oData.getElementsByTagName("item");
    	var oSelect = document.getElementById("softwaresSelect");
    	var oOption, oInner;
    	
    	oSelect.innerHTML = "";
    	for (var i=0, c=nodes.length; i<c; i++) {
    		oOption = document.createElement("option");
    		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
    		oOption.value = nodes[i].getAttribute("id");
    		
    		oOption.appendChild(oInner);
    		oSelect.appendChild(oOption);
    	}
    }
    


    Je suis conscient que la majorité des choses à modifier pour réaliser ce que je désire se passe ici.
    Alors j'ai tenté d'ajouter des lignes du style :

    var hopid = document.createElement("name");
    oOption.appendChild(hopid);
    


    Logiquement, je pense avoir bien créé l'attribut name dans <option>. Par contre je ne vois pas bien comment lui faire comprendre comment associer cet attribut à un nom dans la page php afin qu'il récupère les valeurs adéquates se trouvant dans la base de données.

    <?php
    
    header("Content-Type: text/xml");
    echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
    echo "<list>";
    
    $idEditor = (isset($_POST["IdEditor"])) ? htmlentities($_POST["IdEditor"]) : NULL;
    
    if ($idEditor) {
    	mysql_connect($hote, $login, $m_d_p);
    	mysql_select_db($bdd);
    	
    	$query = mysql_query("SELECT * FROM ajax_example_softwares WHERE idEditor=" . mysql_real_escape_string($idEditor) . " ORDER BY name");
    	while ($back = mysql_fetch_assoc($query)) {
    		echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name"] . "\" />";
    	}
    }
    
    echo "</list>";
    
    ?>
    


    Comme vous pouvez le voir ci-dessus, j'aimerai ajouter un attribut dans mon item qui serait associé à être l'attribut name dans <option> de mon formulaire <select>.

    Sinon autre question (mais disons secondaire !)

    Pour récupérer la valeur de l'attribut name dans <option> une fois que je l'aurai créé est que faire :

    var blabla = document.getElementById("idforSelect");
    var onycroit = blabla.name;
    


    Normalement ce code devrait me donner l'attribut name dans <select name=""> s'il y en a un, mais s'il y en a pas, passera-t-il à l'attribut name="" présent dans option?=) Je sais que pour value, ça fonctionne mais pour name j'ai comme un gros doute ! Enfin je dois avouer que j'ai fait pas mal de docs/recherches pour appendChild et createElement, mais par contre pour cette question secondaire je me suis pas bien penché dessus encore !

    J'espère que j'ai été un minimum clair, je pose toujours des questions en fouillis navré :/

    Merci par avance pour votre aide, si quelqu'un peut m'éclairer ! :)






    • Partager sur Facebook
    • Partager sur Twitter
      8 mars 2010 à 22:25:13

      var hopid = document.createElement("name");
      oOption.appendChild(hopid);
      


      Ouais non mais ça t'as pas le droit quoi... T'as pas le droit !

      oOption.name = "Ce que tu veux";
      


      Fini.
      • Partager sur Facebook
      • Partager sur Twitter
        8 mars 2010 à 22:35:03

        Euh, créer une node name??? Une node text dans une option???

        C'est de l'html³? xD
        • Partager sur Facebook
        • Partager sur Twitter
          8 mars 2010 à 22:37:50

          Un textNode dans une option c'est tout à fait correct wapper.
          • Partager sur Facebook
          • Partager sur Twitter
            8 mars 2010 à 22:39:28

            Ah bon? ce n'est pas un attribut?

            Est-ce pareil pour name???
            • Partager sur Facebook
            • Partager sur Twitter
              8 mars 2010 à 23:01:17

              Han ça semble bien moins compliqué que la chose dont je n'ai pas le droit :D (va falloir que je comprenne pourquoi ! :p)

              Alors du coup si je fais :

              oOption.name = nodes[i].getAttribute("title");
              


              avec title placé dans mon fichier.php générant le xml, de la sorte :

              echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name"] . "\" title=\"" . $back["info"] . "\" />";
              


              Je fais comment pour récupérer la valeur de mon attribut name quand le formulaire est généré par AJAX ?=)

              Avec l'attribut value, ce code fonctionne bien (enfin j'ai un retour, même si c'est pas celui que j'attends exactement d'après le code ) :

              var searchtypegame = document.getElementById("editorsSelect");
              	var result02 = searchtypegame.value;
              


              Par contre, remplacer .value par .name ça ne fonctionne pas des masses (enfin j'ai un retour, le nom de la variable $_POST[''], et non pas ce qui devrait être contenu dans le champ info de ma bdd). Je suppose qu'il y a une autre méthode ? (enfin j'espère :p)
              Peut-être qu'il ne faut pas passer par l'id du <select>. En fait je bloque quand il s'agit d'accéder à un attribut autre que value dans <option>. La majorité des recherches que j'ai fait se content d'avoir <option value ="">blabla</option>. Du coup j'ai été incapable de trouver un exemple avec un autre attribut.
              • Partager sur Facebook
              • Partager sur Twitter
                8 mars 2010 à 23:04:46

                @wapper :

                Bah le textNode, c'est simplement un noeud texte. Si tu l'append à un élément, il devient le contenu texte de l'élément.

                Donc si tu fais :

                tonOption.appendChild(document.createTextNode('coucou'));
                


                Tu obtiens

                <option>Coucou</option>
                



                Pour name, cf mon post d'avant. C'est en effet un attribut :)


                @Gravite :

                Bah si j'ai bien compris, actuellement, tu utilises le fait que le value de l'option est automatiquement 'répercuté' sur le select, c'est ça ?

                Je ne pense pas que ce soit une super solution, mieux vaut faire comme ceci je pense :

                var searchtypegame = document.getElementById("editorsSelect");
                var option_selectionnee = searchtypegame.options[searchtypegame.selectedIndex];
                var result02 = option_selectionnee.value;
                var le_name = option_selectionnee.name;
                
                • Partager sur Facebook
                • Partager sur Twitter
                  8 mars 2010 à 23:09:51

                  Golmote> Merci, j'aurai encore appris qqch aujourd'hui :)
                  • Partager sur Facebook
                  • Partager sur Twitter
                    8 mars 2010 à 23:18:53

                    En effet c'est mieux comme tu viens de me proposer merci (j'utilisai belle et bien la répercussion) :)
                    Du coup j'obtiens une value correspondante à celle dans ma bdd.

                    Par contre pour l'attribut name je me tape undefined (je jure que le champ existe, j'ai même mis le même que value pour tester un coup !)

                    function readData(oData) {
                    	var nodes   = oData.getElementsByTagName("item");
                    	var oSelect = document.getElementById("softwaresSelect");
                    	var oOption, oInner;
                    	
                    	oSelect.innerHTML = "";
                    	for (var i=0, c=nodes.length; i<c; i++) {
                    		oOption = document.createElement("option");
                    		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
                    		oOption.value = nodes[i].getAttribute("id");
                    		oOption.name = nodes[i].getAttribute("title");
                    		
                    		oOption.appendChild(oInner);
                    		oSelect.appendChild(oOption);
                    	}
                    


                    et le fichier php, enfin la ligne concernée :

                    echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name"] . "\" title=\"" . $back["id"] . "\" />";
                    


                    Qu'est ce que j'ai mal fait ?=)

                    En tout cas merci pour tout déjà ! J'y vois déjà bien plus clair, je n'avais pas compris la portée de selectedIndex !

                    • Partager sur Facebook
                    • Partager sur Twitter
                      8 mars 2010 à 23:26:38

                      Arf je vois pas d'erreur particulière là... :euh:


                      EDIT : Pas d'erreur dans la console ? (Outils -> Console d'erreurs dans Firefox)
                      • Partager sur Facebook
                      • Partager sur Twitter
                        8 mars 2010 à 23:31:05

                        C'est réglé, c'était ma faute ! (j'ai constaté que des fois pour relancer l'objet, un simple F5 ne suffit pas hum !)

                        Ca marche nickel, merci à toi bonne fin de soirée ! ^^

                        PS : bravo pour la réactivité !
                        • Partager sur Facebook
                        • Partager sur Twitter
                          8 mars 2010 à 23:35:46

                          Ah cool si c'est résolu. :)

                          Ravi d'avoir pu t'aider, et merci pour le compliment du PS, on fait de notre mieux :D
                          • Partager sur Facebook
                          • Partager sur Twitter

                          appendChild et createElement

                          × 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