Salut,
Attention, il te reste encore 2 id prenom et 2 id id_ref. Ce n'est pas valable: change leur libellé.
ERE
Salut,
Attention, il te reste encore 2 id prenom et 2 id id_ref. Ce n'est pas valable: change leur libellé.
ERE
Un id doit être unique.
Tu dois modifier l'appel de l'élément dans Javascript par les nouveaux id.
Je sais qu'un id doit etre unique, mais dans le tuto que j'ai suivi, il y a un id similaire entre le select et la div ou il se trouve.
Si l'id n'est pas similaire le code ne fonctionne plus
Je croyait avoir compris ce bout de code mais la apparament il y a un truc qui m'échappe![]()
Envoyé par jeanjean8501
Tu peux me dire ou se trouve l'id similaireEnvoyé par siddh
![]()
Donne un id à ton select et passe par le XML et n'utilise plus innerHTML avec le div![]()
Okay d'accord !
Bonjour,
J'ai utilisé et essayé d'adapter le bout de code de andry.aime ci dessus. Mais il y a un truc qui m'échappe, je ne vois pas comment ajaxPrenom.php peut recevoir le Nom venant de auteur.php vu qu'il n'y a aucune référence de faire !
auteur.php
ajaxPrenom.php
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47 <html> <head> <title>My webpage is rich</title> <script type='text/javascript'> /* * Méthode qui sera appelée sur le click du bouton */ function change() { var rst = xhr.responseXML; var items=rst.getElementsByTagName('element'); document.getElementById('prenom').options.length=0; for(var i=0;i<items.length;i++) { var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true) document.getElementById('prenom').options[i]=myOption; } } </script> </head> <body> <form> <fieldset style="width: 600px"> <legend>Liste liées</legend> <label>Noms</label> <select name='nom' id='nom' onchange='change()'> <option value='-1'>Aucun</option> <?php mysql_connect("localhost","root","mysql"); mysql_select_db("cmfp_base_commune"); $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom"); while($row = mysql_fetch_assoc($res)) { echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>"; } ?> </select> <label>Prenoms</label> <div id='div_prenom' style='display:inline'> <select name='prenom' id='prenom'> <option value='-1'>Choisir un nom</option> </select> </div> </fieldset> </form> </body> </html>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <?php header("Content-type:text/xml"); echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; echo "<elements>"; if(isset($_POST["Nom"])) { mysql_connect("localhost","root","mysql")or die("Conection impossible"); mysql_select_db("cmfp_base_commune"); $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom"); while($row = mysql_fetch_assoc($res)) { echo '<element>'; echo "<option>".$row["Prenom"]."</option>"; echo '<valeur>'.$row["Prenom"].'</valeur>'; echo '</element>'; } } echo "</elements>"; ?>
Salut,
Le bout de code que je t'ai donné c'est pour remplacer la partie innerHTML dans le onreadystatechange, à mettre à la place de:
di = document.getElementById('prenom');
di.innerHTML = xhr.responseText;
Merci pour sa solution sa fonctionne
Voici le code sa pourra peut etre servir à d'autres.
auteur.php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116 <html> <head> <title>My webpage is rich</title> <script type='text/javascript'> function getXhr(){ var xhr = null; if(window.XMLHttpRequest) // Firefox et autres xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ // Internet Explorer try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } /** * Méthode qui sera appelée sur le click du bouton */ function change() { var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function() { var rst = xhr.responseXML; var items=rst.getElementsByTagName('element'); document.getElementById('prenom').options.length=0; for(var i=0;i<items.length;i++) { var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true) document.getElementById('prenom').options[i]=myOption; } } // Ici on va voir comment faire du post xhr.open("POST","ajaxPrenom.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'auteur sel = document.getElementById('nom'); nom = sel.options[sel.selectedIndex].value; xhr.send("Nom="+nom); } function change2() { var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function() { var rst = xhr.responseXML; var items=rst.getElementsByTagName('element'); document.getElementById('id_def').options.length=0; for(var i=0;i<items.length;i++) { var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true) document.getElementById('id_def').options[i]=myOption; } } // Ici on va voir comment faire du post xhr.open("POST","ajaxId_Def.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'auteur sel2 = document.getElementById('nom'); nom = sel2.options[sel.selectedIndex].value; sel = document.getElementById('prenom'); prenom = sel.options[sel.selectedIndex].value; xhr.send("Prenom="+prenom + "&Nom="+nom); } </script> </head> <body> <form> <fieldset style="width: 600px"> <legend>Liste liées</legend> <label>Noms</label> <select name='nom' id='nom' onchange='change()'> <option value='-1'>Aucun</option> <?php include 'connexion_mysql.php'; $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom"); while($row = mysql_fetch_assoc($res)) { echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>"; } mysql_close ($connexion); // Fermeture de la connexion a la bdd ?> </select> <label>Prenoms</label> <div id='prenoms' style='display:inline' > <select name='prenom' id='prenom' onchange='change2()'> <option value='-1'>Choisir un nom</option> </select> </div> <label>Id_Def</label> <div id='id_defs' style='display:inline' > <select name='id_def' id='id_def'> <option value='-1'>Choisir un nom et un prenom</option> </select> </fieldset> </form> </body> </html>
ajaxPrenom.php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <?php header("Content-type:text/xml"); echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; echo "<elements>"; if(isset($_POST["Nom"])) { include 'connexion_mysql.php'; $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom"); while($row = mysql_fetch_assoc($res)) { echo '<element>'; echo "<option>".$row["Prenom"]."</option>"; echo '<valeur>'.$row["Prenom"].'</valeur>'; echo '</element>'; } } echo "</elements>"; ?>
ajaxId_Def.php
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <?php header("Content-type:text/xml"); echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; echo "<elements>"; if((isset($_POST["Nom"]))&&(isset($_POST["Prenom"]))) { include 'connexion_mysql.php'; $res = mysql_query("SELECT Id_Def from Stagiaires WHERE Nom='".$_POST["Nom"]."' AND Prenom = '".$_POST["Prenom"]."' ORDER BY Id_Def"); while($row = mysql_fetch_assoc($res)) { echo '<element>'; echo "<option>".$row["Id_Def"]."</option>"; echo '<valeur>'.$row["Id_Def"].'</valeur>'; echo '</element>'; } } echo "</elements>"; mysql_close ($connexion); // Fermeture de la connexion a la bdd ?>
Malgré tout il subsiste un petit bug : lorsque ma liste déroulante de prénom ne contient qu'un élément l'évènement onchange ne doit pas etre pris en compte car la 3 liste ne s'alimente que lorsque l'élément du select est changé donc il est nécéssaire qu'il y ait plusieur éléments.
Autre chose aussi lorsque je veux tester les alimentations des listes, au bout de quelques modifications du nom et prénom, la troisième liste n'est plus alimentée
Mais bon sa doit pas etre bien compliqué, le premier bug doit etre dut a l'évènement et l'autre bah je vais chercher ^^
Encore merci a toi andry.aime![]()
Beau boulot !
Pour compléter tes interrogations:
Par contre pour ton second souci je ne comprends pas trop ce qui se passe: tu laisses bien le temps aux listes de se charger ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 function change2() { //si un seul prenom... if (document.getElementById('prenom').options.length==1) { //on vide la derniere combo document.getElementById('id_def').options.length=0; //on quitte return; } ... }
ERE
Merci à andry.aime plutôt
Sinon pour le bout de code que tu m'a fourni, cela ne fonctionne toujours pas mieux.
Je l'ai implémenté de la manière suivante :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 function change2() { var xhr = getXhr(); // On défini ce qu'on va faire quand on aura la réponse xhr.onreadystatechange = function() { var rst = xhr.responseXML; var items=rst.getElementsByTagName('element'); document.getElementById('id_def').options.length=0; for(var i=0;i<items.length;i++) { var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true) document.getElementById('id_def').options[i]=myOption; } } // Ici on va voir comment faire du post xhr.open("POST","ajaxId_Def.php",true); // ne pas oublier ça pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, l'id de l'auteur sel2 = document.getElementById('nom'); nom = sel2.options[sel.selectedIndex].value; sel = document.getElementById('prenom'); prenom = sel.options[sel.selectedIndex].value; //si un seul prenom... if (document.getElementById('prenom').options.length==1) { //on vide la derniere combo document.getElementById('id_def').options.length=0; //on quitte return; } xhr.send("Prenom="+prenom + "&Nom="+nom); }
Et pour le bug de liste déroulante je les laissent bien se charger mais il y a un probleme de rafraichissement des données au bout de plusieurs clic.
Salut,
Cela n'a pas d'intérêt de le mettre ainsi car tu exécutes inutilement tout ton code
Essaie plutôt en le mettant comme je te l'avais indiqué.
Quant à ton second bug, si tu me fais un export des tes tables je peux tester de mon côté ton souci.
ERE
Salut, merci pour ton aide.
Voici le code sql pour creer et inserer des champs dans ma base.
Code sql : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 -- phpMyAdmin SQL Dump -- version 3.1.1 -- http://www.phpmyadmin.net -- -- Serveur: localhost -- Généré le : Ven 17 Juillet 2009 à 10:51 -- Version du serveur: 5.1.30 -- Version de PHP: 5.2.8 SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; -- -- Base de données: `cmfp_base_commune` -- -- -------------------------------------------------------- CREATE TABLE IF NOT EXISTS `t_stagiaires` ( `Nom` varchar(20) NOT NULL, `Prenom` varchar(20) NOT NULL, `Id_Def` varchar(10) NOT NULL, PRIMARY KEY (`Id_Def`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=COMPACT; -- -- Contenu de la table `t_stagiaires` -- INSERT INTO `t_stagiaires` (`Nom`, `Prenom`, `Id_Def`) VALUES ('DRAPEAU', 'Freddy', '1092214669'), ('DRAPEAU', 'Maxime', '1092814241'), ('DURAND', 'Amélie', '1092831721'), ('DURAND', 'Adrien', '1092831921'), ('DURAND', 'Adrien', '1092833921'), ('DURANT', 'Jean Bernard', '1234567897');
Ci-joint mes codes sources.
Encore merci![]()
Salut,
Pas mal de petites modifs suite à des erreurs de jeunesse, j'ai rectifié et documenté le code.
Notamment celle-ci:Ce test est important car il permet de savoir si la requête AJAX est terminée, et permet de traiter les données renvoyées au bon moment... Cela explique pourquoi par moment tu "perdais" des données.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8 ... xhr.onreadystatechange = function() { //ce test n'était pas présent if(xhr.readyState == 4 && xhr.status == 200){ ... } }
ERE
EDIT : attention je n'ai pas remis la bonne connection MySQL
----
Bonjour,
Je te remercie d'avoir pris le temps de prendre mon code source et de le corriger, ça marche presque (l'id ne saffiche pas pour les champs apres les 2 premier éléments de la premiere listebox). Merci aussi d'avoir apporté des explications, je pense avoir cerné le problème qu'il y avait !
Par contre pour l'erreur de jeunessec'est vraiment une erreure d'étourderie car ce code était présent dans mes premiers code sources mais a dût disparaitre suite à un mauvais copier coller
Mais j'avoue que j'ai fait pas mal d'erreur d'étourderie, car tu m'avais donner des bout de solutions mais je n'ai pas tout assembler ensemble ( ex: document.getElementById('id_def').options.length=0va falloir que je dorme plus la nuit
Merci encore pour ton aide![]()
Dernière modification par Invité ; 18/07/2009 à 17h00.
Salut,
Peux tu préciser stp ?l'id ne saffiche pas pour les champs apres les 2 premier éléments de la premiere listebox
ERE
Voila ce que je croyais au débutMais en faite je me suis aperçu que dès lors qu'un Nom n'a qu'un prénom correspondant, la liste d'ID_Def ne s'alimente pas !En faite dans la liste box des noms supposons qu'il y ait par exemple : DUPONT, DURAND, DURANT, LUCAS. Lorsque je vai choisir dans la liste soit DUPONT ou soit DURAND sa va bien alimenter la liste des prénoms ainsi que la liste des ID_Def bien comme il faut.
Mais des que je vais sélectionner DURANT ou LUCAS sa va bien m'afficher les prénoms correspondant, mais pas les ID_Def.
Je pense que cela doit etre dut à l'évènement onchange() vu que l'élément de la liste box de change pas cela n'implemente pas la fonction appelé par onchange ! Je vais donc me pencher sur ceci![]()
Re,
Effectivement je l'ai fait ainsi car tu avais écrit dans un post précédent:Donc si tu veux que la troisième liste soit alimentée même s'il n'y a qu'un prenom, alors supprime ces lignes de code de change2():lorsque ma liste déroulante de prénom ne contient qu'un élément l'évènement onchange ne doit pas etre pris en compte car la 3 liste ne s'alimente que lorsque l'élément du select est changé donc il est nécéssaire qu'il y ait plusieur éléments.ERE
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 function change2() { //si un seul prenom... if (document.getElementById('prenom').options.length==1) { //on vide la derniere combo document.getElementById('id_def').options.length=0; //on quitte return; } ...
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager