Lier 3 tables AJAX

Bonjour,

Après avoir repris le tuto de SIDDH, j'ai réussi à lier 2 tables..(ligue et secteur)

mes tables SQL :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
table : ligue
id_ligue
nom_ligue
 
table : secteur 
id_secteur
nom_secteur
id_ligue
 
table : departement
id_departement
nom_departement
id_secteur

index.php

Code:

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
 
<form>
			<fieldset>
 
				<label>REGION</label>
				<select name='ligue_j' id='ligue_j' onchange='cherche_secteur()'>  <!-- appel AJAX SECTEUR -->
					<option value='-1'>Aucun</option>
 
						<?php
                                                        require "ConnectPDO.php"; 
                
                                                        $sql = ("SELECT * FROM ligue"); 
                                                        $stmt = $bdd->prepare($sql);
                                                        $stmt->bindValue(':nom_ligue','nom_ligue' , PDO::PARAM_STR); 
                                                        $stmt->execute();
 
                                                        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
                                                                                                        
                                                        foreach ($result as $row) 
                                                                {
                                                                        echo "<option value='".$row["id_ligue"]."'>".$row["nom_ligue"]."</option>";
                                                                }
                                                ?>
				</select>
 
 
				<label>SECTEUR</label>
					<div id='secteur' style='display:inline; '>
						<select id="secteur_j" name='secteur_j' onchange="cherche_departement()"> <!-- onload ??...APPEL AJAX DEPARTEMENT-->
							<option value='-1'>Choisir</option>
						</select>
					</div>
 
				<label>DEPARTEMENT</label>
					<div id='departement' style='display:inline; '>
						<select id="departement_j" name='departement_j'>
							<option value='-1'>Choisir</option>
						</select>
					</div>
 
			</fieldset>
		</form>

ajax_secteur.js

Code:

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
 
			function cherche_secteur()
				{
 
					oRegion = document.getElementById('ligue_j');
					idRegion = oRegion.options[oRegion.selectedIndex].value; 
					console.log(idRegion); 
 
					var xhr = getXhr();
 
					var url = "requete_secteur.php"
 
					xhr.open("POST",url,true);
 
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
					xhr.onreadystatechange = function()
						{
							if(xhr.readyState == 4 && xhr.status == 200)
								{
									afficheResultat(xhr); 
								}
						}
 
 
					xhr.send("id_ligue="+ encodeURI(idRegion));
				}
 
 
 
			function afficheResultat(xhr){
				retourliste = document.getElementById('secteur_j'); 
				retourliste.innerHTML = xhr.responseText;
				 ;
			}

requete_secteur.php

Code:

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
 
<?php
 
 	require "ConnectPDO.php";
 
 	$id_ligue = $_POST['id_ligue']; 
 	var_dump($id_ligue);
 
	echo '<select>';
 
		if(isset($id_ligue))
			{ 
				$sql = "
					SELECT nom_secteur
					FROM secteur 
					WHERE id_ligue = :id_ligue 
					ORDER BY nom_secteur
				";
				$stmt = $bdd->prepare($sql);
 
				$stmt->bindValue('id_ligue', $id_ligue, PDO::PARAM_INT); // Valorisation du paramètre nommé
 
				$stmt->execute();
 
				$result = $stmt->fetchAll();
 
					foreach ($result as $row) 
						{
							echo "<option value='".$row["id_secteur"]."'>".$row["nom_secteur"]."</option>";
						}
			}
 
	echo "</select>";

Tout content de moi, je pensais simplement reproduire la même démarche pour lier une 3ème table...badaboum ...je n'y arrive pas

je ne sais pas si cela est une bonne démarche ? et comment la mettre en oeuvre ? j'ai lu des tutos sans succès

Je crois que cela vient du fait que je n'arrive pas à récupérer la valeur du champ "secteur_j"

quand je fais un : console.log(oSecteur) = - 1; comme s'il n'arrivait pas à rafraîchir le contenu et à le récupérer...

Comment faire ? addEventListener, ..... j'ai lu de nombreux forums mais je n'y arrive pas

Voici la deuxième ajax et requete

ajax_departement.js

Code:

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
 
			function cherche_departement()
				{
 
					/* est-ce la bonne démarche ? */
					/* JE N'ARRIVE PAS A RECUPERER LA VALEUR SECTEUR_J => il reste à -1 : addEventListener  / class date+text/ rafraichir champ  */
 
					oSecteur = document.getElementById('secteur_j');
					idSecteur = oSecteur.options[oSecteur.selectedIndex].value; 
					console.log(idSecteur); 
 
					var xhr = getXhr();
 
					var url = "requete_secteur.php"
 
					xhr.open("POST",url,true);
 
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
					xhr.onreadystatechange = function()
						{
							if(xhr.readyState == 4 && xhr.status == 200)
								{
									afficheResultat2(xhr); 
								}
						}
 
 
					xhr.send("id_secteur="+ encodeURI(idSecteur));
				}
 
 
 
			function afficheResultat2(xhr){
				retourliste = document.getElementById('departement_j'); 
				retourliste.innerHTML = xhr.responseText;
				 ;
			}

requete_departement.php

Code:

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
 
<?php
 
 	require "ConnectPDO.php";
 
 	$id_secteur = $_POST['id_secteur']; 
 	var_dump($id_secteur);
 
	echo '<select>';
 
		if(isset($id_secteur))
			{ 
				$sql = "
					SELECT nom_departement
					FROM departement 
					WHERE id_secteur = :id_secteur 
					ORDER BY nom_departement
				";
 
				$stmt = $bdd->prepare($sql);
 
				$stmt->bindValue('id_secteur', $id_secteur, PDO::PARAM_INT); // Valorisation du paramètre nommé
 
				$stmt->execute();
 
				$result = $stmt->fetchAll();
 
					foreach ($result as $row) 
						{
							echo "<option value='".$row["id_departement"]."'>".$row["nom_departement"]."</option>";
						}
			}
 
	echo "</select>";

j'ai vu qu'avec Ajax_JQUERY cela était bien plus simple mais j'aimerai bien comprendre le fonctionnement des ajax on ne sait jamais si un jour...je continue à lire mais je ne trouve pas des liaisons avec 3 tables sans jquery

J'espère ne pas être très loin pfff
Merci pour votre aide

Lier 3 tables AJAX - PHP