[AJAX] Liste liées Ajax

**emmanuel.remy** · 15/07/2009, 10h34

Salut,

Attention, il te reste encore 2 id prenom et 2 id id_ref. Ce n'est pas valable: change leur libellé.

ERE

Invité · 15/07/2009, 10h58

Envoyé par emmanuel.remy

Salut,

Attention, il te reste encore 2 id prenom et 2 id id_ref. Ce n'est pas valable: change leur libellé.

ERE

En laissant les id des div à prenom et id_def et en mettant les id des select à pprenom et iid_def cela ne fonctionne pas non plus

**andry.aime** · 15/07/2009, 11h05

Un id doit être unique.
Tu dois modifier l'appel de l'élément dans Javascript par les nouveaux id.

Invité · 15/07/2009, 11h20

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

**andry.aime** · 15/07/2009, 11h59

Envoyé par jeanjean8501

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.

Envoyé par siddh

Tu peux me dire ou se trouve l'id similaire

Invité · 15/07/2009, 13h39

Envoyé par andry.aime

Tu peux me dire ou se trouve l'id similaire

C'est corriger

Envoyé par andry.aime

Un id doit être unique.
Tu dois modifier l'appel de l'élément dans Javascript par les nouveaux id.

C'est bien ce que je fait, dans mon js, j'appel l'id de ma div

**andry.aime** · 15/07/2009, 14h59

Donne un id à ton select et passe par le XML et n'utilise plus innerHTML avec le div

Invité · 15/07/2009, 15h18

Okay d'accord !

Invité · 16/07/2009, 08h30

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

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>

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
<?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>";
?>

**andry.aime** · 16/07/2009, 10h38

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;

Invité · 16/07/2009, 14h01

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

**emmanuel.remy** · 16/07/2009, 16h45

Beau boulot !

Pour compléter tes interrogations:

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;
   }
  ...
}

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 ?

ERE

Invité · 17/07/2009, 08h29

Envoyé par emmanuel.remy

Beau boulot !

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.

**emmanuel.remy** · 17/07/2009, 09h27

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

Invité · 17/07/2009, 10h58

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

**emmanuel.remy** · 18/07/2009, 01h24

Salut,

Pas mal de petites modifs suite à des erreurs de jeunesse

, j'ai rectifié et documenté le code.

Notamment celle-ci:

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){
     ...
     }
}

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.

ERE

EDIT : attention je n'ai pas remis la bonne connection MySQL
----

Invité · 18/07/2009, 16h33

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 jeunesse

c'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

Envoyé par emmanuel.remy

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){
     ...
     }
}

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=0

va falloir que je dorme plus la nuit

Merci encore pour ton aide

**emmanuel.remy** · 19/07/2009, 10h57

Salut,

l'id ne saffiche pas pour les champs apres les 2 premier éléments de la premiere listebox

Peux tu préciser stp ?

ERE

Invité · 19/07/2009, 12h34

Voila ce que je croyais au début

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.

Mais 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 !

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

**emmanuel.remy** · 19/07/2009, 18h21

Re,

Envoyé par jeanjean8501

Voila ce que je croyais au début

Mais 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 !

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

Effectivement je l'ai fait ainsi car tu avais écrit dans un post précédent:

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.

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():

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;
    }
...

ERE

[AJAX] Liste liées Ajax

AJAX

Discussions similaires

Partager

Partager