Partage
  • Partager sur Facebook
  • Partager sur Twitter

Formulaire de type select en AJAX

Sujet résolu
    5 mars 2010 à 1:42:06

    Bonsoir à tous,

    Voilà pour des besoins personnels j'ai décidé de me mettre à utiliser AJAX. Pour se faire j'ai pas mal parcouru le net à la recherche de docs, de tutos. Je me suis grandement inspiré de ce tutoriel.

    Bon j'ai pas mal modifié le script, mais le principe reste le même, j'ai plusieurs menus déroulants.

    Mon problème réside dans plusieurs problèmes ! (eh oui je suis d'un compliqué).

    Tout d'abord j'ai constaté que ce script ne peut fonctionner que si l'on envoie une variable numérique (d'où une value numérique). Si c'est un texte la requête n'aboutit pas.

    J'ai donc tenté d'ajouter ceci, mais sans succès, ça ne marche pas avec du texte uniquement avec des chiffres !

    xhr2.open("POST", "listing.php", true);
    	xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	newvalue = encodeURIComponent(value);
    	xhr2.send("genre=" + newvalue);
    




    Donc si quelqu'un peut m'expliquer pourquoi les <option value="chiffre"><option>, ne peuvent pas être du texte je suis preneur. Sachant que j'aimerai beaucoup récupérer ses value sous la forme d'un $_POST[''] :p

    A l'heure actuel mon plus gros problème réside dans le fait que j'aimerai mettre d'autres attributs dans le formulaire select et surtout dans l'élément <option>. En effet, j'aimerai qu'en fonction d'un attribut indiquant une valeur (autre que value :s) je puisse définir l'affichage ou non du menu déroulant.

    Le problème concerne cette partie du code :

    function readData(oData) {
    	var nodes   = oData.getElementsByTagName("item");
    	var oSelect = document.getElementById("game");
    	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("class");
    		
    		oOption.appendChild(oInner);
    		oSelect.appendChild(oOption);
    	}
    }
    


    J'ai compris plus ou moins comment ça fonctionne mais j'ai été incapable de pouvoir produire un attribut valable que je pourrai appeler en javascript (qui aurait été généré au préalable par le fichier xml (donc valeur dans la bdd) appelé grâce à la requête AJAX) afin de vérifier sa valeur et agir en conséquence.

    A l'heure actuelle je ne peux agir que sur un élément, c'est pas la joie :D

    <script>
    document.getElementById("game").onclick = function()
    {
         var searchgame = document.getElementById("game");
    	 var result01 = searchgame.value;
    	 var searchtypegame = document.getElementById("typegame");
    	 var result02 = searchtypegame.value;
    	 alert("test" + result02);
    	 if (result02 == 0)
    	 {
    	 document.getElementById("typegame").style.display = "none";
    	 }
    	 if (result01 == 2 || result01 == 7)
    	 {
    	 document.getElementById("typegame").style.display = "inline";
    	 }
    }
    
    </script>
    


    Comme vous pouvez le voir avec ce script j'ai un formulaire de type select et je vérifie la value par l'évènement onclick (onchange serait plus adapté pour ce genre de formulaire, mais il posait quelques soucis vu le nombre de menus déroulants que j'ai mis en place).

    Je sais pas si c'est très clair, je pourrai rajouter tous les codes sources, mais bon vu que ça ressemble à un joyeux bordel, je me suis attardé sur les bouts de codes concernés.

    Voilà je vous remercie par avance pour votre aide :)
    • Partager sur Facebook
    • Partager sur Twitter
      6 mars 2010 à 13:41:28

      Le texte passe dans les attributs value sans problème. Ce qui est envoyé à POST, c'est du texte et uniquement du texte. Donc c'est à la récupération que tu te plantes.
      • Partager sur Facebook
      • Partager sur Twitter
        6 mars 2010 à 21:35:51

        Eh bien la récupération s'effectue avec la function readData (provenant du tutoriel que j'ai cité plus tôt).
        Je ne vois pas spécialement ce qui peut faire en sorte qu'il aime bien les caractères numériques et non pas les autres (sachant que la récupération fonctionne bien, j'ai testé avec deux entrées une contenant une value = 1 et l'autre contenant une value = a, quand je sélectionne 1 l'autre menu m'apporte une réponse, par contre quand je sélectionne a c'est le drame :D).

        En rédigeant cette parenthèse, je me rends compte que les chiffres numériques peuvent être déclarés par une variable du style var a = 1; alors que pour les autres caractères on doit absolument faire var b = 'blabla'; est-ce que ça pourrait venir de là? (malgré je ne vois pas comment lui indiquer cela :p).

        J'avais songé également à une mauvaise correspondance dans les bases de données, malheureusement ce n'est pas le cas après vérification.

        Enfin je dois admettre que je ne suis pas encore assez aguerri pour maîtriser l'utilisation de commandes telles que createElement, createTextNode etc... Même si je vois plus ou moins bien leur utilité je ne serai pas capable de les placer correctement par moi-même encore :p
        • Partager sur Facebook
        • Partager sur Twitter
          6 mars 2010 à 21:50:01

          Non, je parle de la récupération en PHP, dans listing.php.
          • Partager sur Facebook
          • Partager sur Twitter
            6 mars 2010 à 21:57:35

            Ben si initialement php me récupère bien dans la bdd ce qui est contenu dans une entrée spécifiée il s'en moque que ça soit un chiffre ou tout autre caractère non? ^^

            <?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) {
            		$hote = "localhost";
            		$login = "root";
            		$m_d_p = "";
            		$bdd = "test";
            		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>";
            ?>
            
            • Partager sur Facebook
            • Partager sur Twitter
              6 mars 2010 à 22:19:31

              Et pourtant, il y a bien une erreur dans ce code, tu as vu la coloration syntaxique ?
              <?php
              $back["name]
              ?>
              

              Il manque le guillemet à la fin.
              • Partager sur Facebook
              • Partager sur Twitter
                6 mars 2010 à 22:32:59

                En effet merci pour (ce foutu guillemet :p) cette erreur, hélas elle ne résout pas le problème. Il est toujours allergique au fait que la value soit un chiffre ou autre :p
                • Partager sur Facebook
                • Partager sur Twitter
                  6 mars 2010 à 22:53:40

                  Normal, tu ne le récupères pas, il n'existe que "id" et "name" dans tes <item> or tu fais prendre à l'option la valeur de "class" qui n'existe pas.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    7 mars 2010 à 0:27:29

                    Merci beaucoup pour l'aide :) Je continue à fouiller !

                    Je ne comprends pas par contre pourquoi je donne à <option value="class"></option>?
                    logiquement value="a" alors en quoi ça me créé une classe? Il y a sûrement quelque chose qui doit m'échapper avec la syntaxe de présentation de renvoie de la réponse sous la forme d'une page xml...

                    Je me suis amusé à remplacer par exemple name ou encore id dans mes <item> (en faisant la modification adéquate dans le fichier .js), mais ça ne change rien à mes yeux.

                    C'est une belle galère quand même que de vouloir un misérable "a" en value à la place d'un chiffre tel 1 :p Enfin je ne désespère pas, ça va marcher (dire que c'est le problème mineur haha !).
                    Merci bien pour les informations que tu m'as donné ! On est reparti pour de la recherche intense !
                    • Partager sur Facebook
                    • Partager sur Twitter
                      7 mars 2010 à 1:12:01

                      Mais qu'est-ce que tu chies ?

                      La ligne suivante :
                      <?php
                      echo "<item id=\"" . $back["id"] . "\" name=\"" . $back["name] . "\" />";
                      

                      Crée une balise item qui contient un attribut id et un attribut name

                      Ensuite, je commente et corrige ta fonction readData :
                      function readData(oData) {
                      	var nodes   = oData.getElementsByTagName("item");
                      	// Là, tu récupères tous les items que listing.php a créé
                      
                      	var oSelect = document.getElementById("game");
                      	var oOption, oInner;
                      	
                      	oSelect.innerHTML = "";
                      	for (var i=0, c=nodes.length; i<c; i++) {
                      	// Là, tu lances une boucle pour chaque item
                      
                      		oOption = document.createElement("option");
                      		oInner  = document.createTextNode(nodes[i].getAttribute("name"));
                      		// Là, tu dis que le texte dans l'option est l'attribut name de l'item
                      
                      		oOption.value = nodes[i].getAttribute("id");
                      		// Là, tu dis que la valeur de l'option est égale à l'attribut class de l'item
                      		// Mais cet attribut n'existe pas !! J'ai remplacé par id qui lui existe par exemple
                      		
                      		oOption.appendChild(oInner);
                      		oSelect.appendChild(oOption);
                      	}
                      }
                      
                      • Partager sur Facebook
                      • Partager sur Twitter
                        7 mars 2010 à 2:05:21

                        Merci pour la description (enfin les commentaires) du code, cependant je l'ai compris. Il est vrai je m'en excuse, qu'entre le code d'au-dessus et celui de par la suite (je l'avais dit que c'est le bordel) le .js et et le .php ne s'accordaient pas.

                        Malgré ça chez moi c'était bon autant en .php qu'en .js j'avais mon attribut id. Si ça n'avait pas été le cas je ne pourrai en aucun recevoir les données, le script ne fonctionnerait pas.

                        Or, il fonctionne bien, mais uniquement avec des value en chiffres (pas d'autres caractères), ces value sont récupérées par $_POST['idEditor'] dans le fichier .php alors pourquoi peut-il lire sans soucis les chiffres mais que dès qu'il voit autre chose (caractères autres que des chiffres) il prend peur? ^^

                        Après tout c'est à partir du value de ce formulaire select ci-dessous :

                        <select id="editorsSelect" onchange="request(this)+requesta(this)">
                        				<option value="none">Selection</option>
                        				<?php				
                        					$hote = "localhost";
                        					$login = "root";
                        					$m_d_p = "";
                        					$bdd = "test";
                        					mysql_connect($hote, $login, $m_d_p);
                        					mysql_select_db($bdd);
                        					
                        					$query = mysql_query("SELECT * FROM ajax_example_editors ORDER BY name");
                        					while ($back = mysql_fetch_assoc($query)) {
                        						echo "<option value=\"" . $back["name"] . "\">" . $back["name"] . "</option>\n";
                        					}
                        				?>			
                        			</select>
                        


                        que la requête est envoyée à l'aide de XMLHttpRequest et qu'on obtient une variable $_POST[''] contenant value qui ici est la value de l'option choisie dans le premier menu déroulant afin de fournir un second menu sur mesure.
                        • Partager sur Facebook
                        • Partager sur Twitter
                          7 mars 2010 à 11:24:05

                          C'est toujours aussi confus pour moi. Mais le mieux, c'est de faire des tests pour savoir où ta valeur se perd. Donc un alert par ci, un par là, un var_dump dans le php...
                          • Partager sur Facebook
                          • Partager sur Twitter
                            7 mars 2010 à 13:21:54

                            En fait au-delà même du code (bordélique que j'ai bidouillé :p), si tu suis ce tutoriel qui est censé donner ça.

                            Chose que j'obtiens sans soucis particuliers, le problème se pose quand tu agis sur les bases de données fournies. La correspondance pour générer le second menu se fait sur une id possédant un chiffre. Or si j'ai envie de changer dans les deux tables ce chiffre et y mettre une lettre (genre "a" :p) ça ne fonctionne plus. Je précise que les tables possèdent le même format, donc ça reste un mystère encore pour le moment :p

                            Je vais tenter de suivre pas à pas avec alert et var_dump où passent ces données merci :) C'est quand même bizarre que changer un si petit caractère occasionne tant de soucis bhouu !
                            • Partager sur Facebook
                            • Partager sur Twitter
                              7 mars 2010 à 13:39:35

                              Ah, enfin l'eau se fait limpide. T'es pas simple toi. Les champs des base de données ont un type et c'est pas pour décorer. Faut que tu change l'INT par un VARCHAR si tu veux du texte.
                              • Partager sur Facebook
                              • Partager sur Twitter
                                7 mars 2010 à 13:52:33

                                Sauf que manque de bol j'ai déjà changé le type et le problème reste toujours là.
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  7 mars 2010 à 14:17:03

                                  Et les tests que je t'ai suggéré de faire, ça donne quoi ?
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    7 mars 2010 à 15:45:46

                                    Concernant les alert, ils contiennent bien les value attendues (un a ou bien un 1). En ce qui concerne l'utilisation de var_dump, j'éprouve un peu de difficulté à l'utiliser étant donné que je génère un fichier xml, je vois pas comment l'afficher. J'ai tenté de créer une variable de session et de faire un include sur une autre page pour analyser le var_dump mais ça ne fonctionne pas :p

                                    Par contre j'ai regardé (avec un autre script) ce que contient ma variable de SESSION recevant les value, et je confirme qu'elle reçoit bien le 1 ou le a aussi :/
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      7 mars 2010 à 20:08:35

                                      OK et donc à l'envoi du formulaire à la fin, la donnée POST contient 1,2 3 si c'est chiffre mais lorsqu'il y a des lettres que contient la donnée POST (type et valeur précise) que tu peux afficher avec var_dump($_POST['champ']);
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        7 mars 2010 à 20:43:21

                                        alors un var_dump sur une sélection d'un chiffre 5 :

                                        string(1) "5"

                                        Le même sur mon copain le caractère a :

                                        string(1) "a"

                                        (En tout cas je te remercie de me répondre depuis hier, malgré le fait que je me sois très mal expliqué)
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          7 mars 2010 à 22:32:57

                                          Ça devient corsé là quand même, ta donnée POST contient la bonne information, tu la mets dans un VARCHAR et pof, ça passe pas ?

                                          Tu appliques un intval quelque part ?
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            7 mars 2010 à 22:57:50

                                            je n'utilise aucunement la fonction intval(); :) J'ai en effet modifié le tutoriel, mais j'ai réalisé les tests dont on a parlé tout le long sur les fichiers initiaux du tutoriel.

                                            Et comme tu en conclus (et moi aussi hélas :p), j'ai le bon type de données dans la bdd, la variable POST est fonctionnelle.

                                            Quand tu sélectionnes 5 dans mon menu déroulant, l'entrée correspondante s'affiche dans l'autre menu, par contre si tu sélectionnes a, eh bien rien ne s'affiche. Pourtant je jure qu'il y a une entrée correspondante :D
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              7 mars 2010 à 23:30:56

                                              Ah attends, là, je pense à un truc. Oh merde, mais c'est tout con, nan mince, je suis trop à l'ouest. En SQL, il faut entourer les chaînes avec des apostrophes :
                                              <?php
                                              $query = mysql_query("SELECT * FROM ajax_example_softwares WHERE idEditor='" . mysql_real_escape_string($idEditor) . "' ORDER BY name");
                                              
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                                7 mars 2010 à 23:54:12

                                                Citation : Gravite


                                                En rédigeant cette parenthèse, je me rends compte que les chiffres numériques peuvent être déclarés par une variable du style var a = 1; alors que pour les autres caractères on doit absolument faire var b = 'blabla'; est-ce que ça pourrait venir de là? (malgré je ne vois pas comment lui indiquer cela :p).



                                                Haha je suis dégoûté :) J'avais cerné le potentiel problème mais impossible d'en trouver la source :/
                                                Merci beaucoup !!! Piouf se fut laborieux, et c'est comme toujours, de misérables apostrophes ou un point-virgule manquant (ou de trop) et c'est la galère ! :)

                                                Ahhhh ! Encore une fois merci ! Une épine de moins à ces problèmes :) Je suis pas près de l'oublier le coup des apostrophes.
                                                Bon j'ai encore d'autres soucis mais je recréerai un topic à l'occasion, ça sera plus clair je crois.
                                                • Partager sur Facebook
                                                • Partager sur Twitter

                                                Formulaire de type select en AJAX

                                                × 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