3 formulaires liste liés avec BDD SQL [Résolu]

sebb17 · 07/04/2011, 21h02

Bonjour,

J ai repris un script (http://siddh.developpez.com/articles/ajax/#LIV-A) qui permet de lier 2 formulaires type liste , que j ai adapté pour mes données et qui marche trés bien.

Seulement, le problème est que j voudrais en ajouter un 3 iemes afin d'avoir 3 formulaires type listes liés (pour région, département et ville)

J'ai donc essayer de créer dans le script un autre fonction ("go2()"), identique à celle qui agit sur la première liste, et j'ai essayé de l'adapter à la 2 ieme liste .
Résultat : la 2 ieme liste fonctionne ( quand je choisi une region dans la 1er liste, les départements associés s'affichent dans la 2ème liste) mais rien ne se passe pour la 3ieme liste !!!

J'ai vérifié mes requêtes séparément et elle marche bien, donc ca doit venir du script !! je pense que la valeur du POST qui est envoyé au clic de la 2 ieme liste ($_POST['id-departement']) est null !!

J'ai donc 3 fichiers:
-le script ("test_JS_ajax_3form-liees.php")
-les deux php ("Ajaxdep.php" et "Ajaxville.php" qui exécute les requêtes) mais j pense pas que ca vienne d'eux !
Je suis presque sûr qu'il s'agit d'une petite erreur!!

Mes tables sont comme ceci:
region :
-id_region :int(11)
-nom_region :varchar(250)

departement :
-id_departement :int(11)
-id_region :int(11)
-code :varchar(3)
-nom_departement :varchar(250)

maps_ville :
-id_ville :int(11)
-id_departement :int(11)
-nom :varchar(250)
-cp : varchar(6)

Voici la page du script (j'ai pas coller au debut du code la partie pour ouvrir la BDD, car tout ceci fonctionne)

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
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
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</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 go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('dep').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxdep.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
				sel1 = document.getElementById('region1');
				idauteur = sel1.options[sel1.selectedIndex].value;
				xhr.send("id_region="+idauteur);
			}
			function go2(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('dep').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxville.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('dep1');
				iddepartement = sel2.options[sel2.selectedIndex].value;
				xhr.send("id_departement="+iddepartement);
			}
		</script>
	</head>
	<body>
	<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>region</label>
				<select name='region' id='region1' onchange='go()'>
				  <option value='-1'>Aucun</option>
				  <?php
do {  
?>
				  <option value="<?php echo $row_Recordset1['id_region']?>"><?php echo $row_Recordset1['nom_region']?></option>
				  <?php
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
  $rows = mysql_num_rows($Recordset1);
  if($rows > 0) {
      mysql_data_seek($Recordset1, 0);
	  $row_Recordset1 = mysql_fetch_assoc($Recordset1);
  }
?>
              </select>
				<label>departement</label>
				<div id='dep' style='display:inline'>
				<select name='dep' id='dep1' onchange='go2()'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
                <label>ville</label>
				<div id='ville' style='display:inline'>
				<select name='ville' id='ville1' >
					<option value='-1'>Choisir un auteur</option>
				</select>
                </div>
			</fieldset>
		</form>
	</body>
</html>

la page du fichier "Ajaxdep.php"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='dep'>";
	if(isset($_POST["id_region"])){
 
		mysql_connect("localhost","root","");
		mysql_select_db("test");
		$res = mysql_query("SELECT id_departement,nom_departement FROM departement WHERE id_region=".$_POST["id_region"]." ORDER BY nom_departement");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_departement"]."'>".$row["nom_departement"]."</option>";
		}
	}
	echo "</select>";
?>

Et la page du fichier "Ajaxville.php" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='ville'>";
	if(isset($_POST["id_departement"])){
 
		mysql_connect("localhost","root","");
		mysql_select_db("test");
		$res = mysql_query("SELECT id_ville,nom FROM maps_ville WHERE id_departement=".$_POST["id_departement"]." ORDER BY nom");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_ville"]."'>".$row["nom"]."</option>";
		}
	}
	echo "</select>";
?>

Voila j’espère que j'ai été clair dans mon explication !
Je vous remercie d'avance pour votre aide
Ps: je débute dans le javascript et le code en generale, donc soyez indulgent..!

Billy KiT · 08/04/2011, 00h01

Salut,
dans go2() tu as remis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('dep').innerHTML = leselect;

alors que c'est l’élément 'ville' qui doit être modifié

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('ville').innerHTML = leselect;

sebb17 · 08/04/2011, 00h07

Merci d'avoir répondu si vite !

effectivement j avais bien oublié de changer (on va mettre ça sur le compte du copier coller)!

Mais ça ne marche toujours pas !! toujours le même problème..rien ne se passe au niveau de la 3ieme liste!

Si quelqu'un a une idée du problème ??

merci

Billy KiT · 08/04/2011, 01h21

pour tester, ajoutes des lignes :

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
<?php
	echo "id_departement=".$_POST["id_departement"]."<br>"; // teste variable postée
	// echo "<select name='ville'>";
	if(isset($_POST["id_departement"])){
	
		mysql_connect("localhost","root","");
		mysql_select_db("test");
		$requete="SELECT id_ville,nom FROM maps_ville WHERE id_departement=".$_POST["id_departement"]." ORDER BY nom";
		echo "requete=".$requete."<br>"; // lit la requête copier/coller pour test
		$res = mysql_query($requete);
		echo "nb=".mysql_num_rows($res)."<br>"; // affiche le nombre d'enregistrements trouvés
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_ville"]."'>".$row["nom"]."</option>";
		}
	}
	// echo "</select>";
?>

Cela devrait permettre de trouver où ça coince

sebb17 · 08/04/2011, 03h35

J'ai essayer en insérant ces lignes mais cela n'affiche rien de plus quand je lance le fichier qui contient le script javascript ! je vois uniquement mes 3 listes !

Et si je lance le fichier Ajaxville.php séparément ça m indique qu il n y a pas de variable POST (ce qui est normal!)

???

andry.aime · 08/04/2011, 06h07

Bonjour,

Tu n'appelles aucune fonction ajax dans les onchange des select générés.

A+.

sebb17 · 08/04/2011, 14h28

merci d' avoir repondu , mais je ne comprend pas ce que tu veux dire.

Il y a pourtant une fonction ("go()") dans le onchange du select de la liste 1 (qui marche bien) et une fonction ("go2()") qui est dans le select de la liste 2..(qui marche pas)

besoin d'aide SVP !

nadox · 08/04/2011, 14h47

Bonjour,

Le select généré dans Ajaxdep.php n'appelle rien sur le onchange, et d'ailleurs il n'a pas d'id non plus... (l'Ajax écrase le select par celui généré donc il faut garder les mêmes attributs que le select original)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo "<select name='dep'  id='dep1' onchange='go2()'>";

sebb17 · 08/04/2011, 15h13

Super ca marche !!
Merci beaucoup a tous ceux qui ont répondu, merci pour votre temps!
Ca marche impect!
Quand je choisi la région ça affiche bien les departements correspondant dans la 2ieme liste et quand je change de departement, les villes correspondantes s'affiche bien dans la 3ieme liste !!

Cependant il faut encore que je trouve une solution pour que quand je choisi une region, les departements correspondant s'affiche dans la liste 2 (comme jsuqu'a présent) mais AUSSI que les villes ,correspondantes au 1er departement affiché par defaut dans la liste 2, s'affichent dans la liste 3.(sans que l'on ai besoin de cliquer)
Je ne sais pas si c'est bien clair ! si quelqu'un a une idée j suis preneur !
Encore merci pour les conseils!
A+

nadox · 08/04/2011, 20h47

Oui, il suffit d'appeler go2 dans le onreadystatechange de go.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
                    if(xhr.readyState == 4 && xhr.status == 200){
                        leselect = xhr.responseText;
                        // On se sert de innerHTML pour rajouter les options a la liste
                        document.getElementById('dep').innerHTML = leselect;
                        go2();
                    }

sebb17 · 09/04/2011, 01h24

Super merci beaucoup!
Merci beaucoup pour votre aide et votre efficacité, en particulier à NADOX!
A+

08/04/2011, 00h01	#2
Billy KiT Membre du Club Inscription : mars 2011 Messages : 47 Détails du profil Informations forums : Inscription : mars 2011 Messages : 47 Points : 59 Points : 59	Salut, dans go2() tu as remis : Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('dep').innerHTML = leselect; alors que c'est l’élément 'ville' qui doit être modifié Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElementById('ville').innerHTML = leselect;
	10

08/04/2011, 00h07	#3
sebb17 Invité de passage Inscription : avril 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : avril 2011 Messages : 11 Points : 1 Points : 1	Merci d'avoir répondu si vite ! effectivement j avais bien oublié de changer (on va mettre ça sur le compte du copier coller)! Mais ça ne marche toujours pas !! toujours le même problème..rien ne se passe au niveau de la 3ieme liste! Si quelqu'un a une idée du problème ?? merci
	00

08/04/2011, 03h35	#5
sebb17 Invité de passage Inscription : avril 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : avril 2011 Messages : 11 Points : 1 Points : 1	J'ai essayer en insérant ces lignes mais cela n'affiche rien de plus quand je lance le fichier qui contient le script javascript ! je vois uniquement mes 3 listes ! Et si je lance le fichier Ajaxville.php séparément ça m indique qu il n y a pas de variable POST (ce qui est normal!) ???
	00

08/04/2011, 06h07	#6
andry.aime Rédacteur/Modérateur Andry Aimé Inscription : septembre 2007 Messages : 5 126 Détails du profil Informations personnelles : Nom : Andry Aimé Localisation : Ile Maurice Informations forums : Inscription : septembre 2007 Messages : 5 126 Points : 7 270 Points : 7 270	Bonjour, Tu n'appelles aucune fonction ajax dans les onchange des select générés. A+.
	10

08/04/2011, 14h28	#7
sebb17 Invité de passage Inscription : avril 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : avril 2011 Messages : 11 Points : 1 Points : 1	merci d' avoir repondu , mais je ne comprend pas ce que tu veux dire. Il y a pourtant une fonction ("go()") dans le onchange du select de la liste 1 (qui marche bien) et une fonction ("go2()") qui est dans le select de la liste 2..(qui marche pas) besoin d'aide SVP !
	00

08/04/2011, 15h13	#9
sebb17 Invité de passage Inscription : avril 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : avril 2011 Messages : 11 Points : 1 Points : 1	Super ca marche !! Merci beaucoup a tous ceux qui ont répondu, merci pour votre temps! Ca marche impect! Quand je choisi la région ça affiche bien les departements correspondant dans la 2ieme liste et quand je change de departement, les villes correspondantes s'affiche bien dans la 3ieme liste !! Cependant il faut encore que je trouve une solution pour que quand je choisi une region, les departements correspondant s'affiche dans la liste 2 (comme jsuqu'a présent) mais AUSSI que les villes ,correspondantes au 1er departement affiché par defaut dans la liste 2, s'affichent dans la liste 3.(sans que l'on ai besoin de cliquer) Je ne sais pas si c'est bien clair ! si quelqu'un a une idée j suis preneur ! Encore merci pour les conseils! A+
	00

09/04/2011, 01h24	#11
sebb17 Invité de passage Inscription : avril 2011 Messages : 11 Détails du profil Informations personnelles : Sexe : Informations forums : Inscription : avril 2011 Messages : 11 Points : 1 Points : 1	Super merci beaucoup! Merci beaucoup pour votre aide et votre efficacité, en particulier à NADOX! A+
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email