Résolu Ajouter 4eme niveau de liste liee

Meilleure réponse sélectionnée par sasa_32.

Oui, vous avez raison, c'est moi que j'ai ecris quartier_cp, vraiment j'ai completement perdu le focus

Merci bien pour l'aide

Voila

/**

	 * Méthode qui retourne la liste des ville pour une region

	 *

	 * @param int $id

	 * @return array

	 */

	public function getVilleByRegion($id)

	{

 
	}

 
	/**

	 * Méthode qui retounre la liste des ville d'un département

	 *

	 * @param int $id

	 * @return array

	 */

	public function getVilleByDpt($id)

	{

		$prepare = $this->prepare("SELECT ville_id, ville_name, ville_cp

		FROM ville

		WHERE dpt_id = $id");

		$prepare->execute();

		$villes = $prepare->fetchAll();

 
		return $villes;

	}

 
 
/**

	 * Méthode qui retourne la liste des quartiers pour un département

	 *

	 * @param int $id

	 * @return array

	 */

	 public function getQuartierByRegion($id)

	{

 
	}

 
	public function getQuartierByDpt($id)

	{

 
	}

 
	/**

	 * Méthode qui retounre la liste des quartier d'une ville

	 *

	 * @param int $id

	 * @return array

	 */

	public function getQuartierByVille($id)

	{

		$prepare = $this->prepare("SELECT quartier_id, quartier_name, quartier_cp

		FROM quartier

		WHERE ville_id = $id");

		$prepare->execute();

		$quartiers = $prepare->fetchAll();

 
		return $quartiers;

	}

}

Non, je parle de la fonction getQuartierByVille qui est contenue dans ton fichier class.france.php

Voila les fonctions

//Retourne la liste des villes d'un département
function getVille(){
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('champsVille').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","ajax.ville.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('dpt');
idDpt = sel.options[sel.selectedIndex].value;
xhr.send("idDpt="+idDpt);
}

//Retourne la liste des quartiers d'une ville
function getQuartier(){
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('champsQuartier').innerHTML = leselect;
}
}

// Ici on va voir comment faire du post
xhr.open("POST","ajax.quartier.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('ville');
idVille = sel.options[sel.selectedIndex].value;
xhr.send("idVille="+idVille);

}

Oui, mais ça veut rien dire ça. C'est peut être ta fonction getQuartierByVille qui est mal foutue.

biensur après insert into on ville qui est le nom de la table

voila pour quartier INSERT INTO `quartier` (`quartier_id`, `ville_id`, `quartier_name`) VALUES
(1,21666, 'tunisie');
et voila pour ville INSERT INTO (`ville_id`, `dpt_id`, `ville_name`, `ville_cp`, `ville_lat`, `ville_lon`) VALUES

(21666, 75, 'Amillis', '77120', '48.7398882', '3.1290727')

voila les requete d'insertion mais le 4eme niveau ne s'affiche pas lorsque je selectionne Amillis comme ville le champ quartier est vide.
je veux savoir pourquoi ce resultat et comment je peux corriger le probleme.

Merci d'avance

Déjà, le fait qu'il te mette un <select> vide veut dire que le javascript est bien configuré.
Maintenant, ça veut aussi dire que la page PHP ne retourne qu'un select vide, et que donc, il n'y a pas d'éléments retournés par ta fonction.
Donc vérifie ta fonction, que si tu lui donnes un ID de ville correct, ça te retourne bien les quartiers disponibles.

Bonjour

Je veux dire merci pour tout qui m'aide encore autre fois. pouver-il quelqu'un me dire que l'erreur peut etre dû à quoi, car j'ai pas pu connaitre l'erreur et je sais que firebug interprete les requete XHR et je prefere ne pas l''installer pour le moment car l'espace memoire libre dans mon ordinateur n'est pas beaucoup.

Merci pour tout ceux qui participe dans ce forum pour m'aider

Bah là je ne vois plus d'erreurs.
Alors, il faut vérifier du côté de ta fonction getQuartierByVille pour vérifier qu'elle retourne bien ce qu'il faut. Mais je t'invite quand même à suivre le conseil d'Edyr, tu télécharges Firefox + Firebug si ce n'est pas déjà fait.
Tu ouvres l'onglet "Réseau" et tu fais tes tests, et tu auras tous les appels XHR qui sont fait, et tu pourras voir ce qui est envoyé et ce qui est retourné...

c'est vrai, c'est une faute. j'ai la corriger et le 4eme niveau est encore vide

Alors c'est normal, il y a encore 2 fautes :
A la ligne 6 tu déclares la variable $villes qui va contenir les quartiers:

$villes = $france->getQuartierByVille($_POST['idVille']);

Sauf qu'après (ligne 11) tu utilises une variable $quartiers qui n'existe pas du coup, vu qu'elle s'appelle $villes.
Et à la ligne 12, tu as oublié un s à $quartiers dans le option value.

Avec quelque chose dans ce genre ça devrait être mieux (double clic pour supprimer les numéros de ligne) :

<?php

require_once('liste/class/class.france.php');

 
$france = new france();

 
$quartiers = $france->getQuartierByVille($_POST['idVille']);

 
$listeQuartiers =  '<label for="quartier">Quartier: </label>';

$listeQuartiers .= '<select name="quartier">';

 
for($i=0;$i<count($quartiers);$i++) {

	$listeQuartiers .= '<option value="'.$quartiers[$i]['quartier_id'].'">'.$quartiers[$i]['quartier_name'].')</option>';

}

 
$listeQuartiers .= '</select>';

 
echo mb_convert_encoding($listeQuartiers, "UTF-8", "ISO-8859-15");

?>

voila le fichier ajax.quartier.php

<?php
require_once('liste/class/class.france.php');
 
$france = new france();
 
$villes = $france->getQuartierByVille($_POST['idVille']);
 
$listeQuartiers =  '<label for="quartier">Quartier: </label>';
$listeQuartiers .= '<select name="quartier">';
 
for($i=0;$i<count($quartiers);$i++) {
	$listeQuartiers .= '<option value="'.$quartier[$i]['quartier_id'].'">'.$quartiers[$i]['quartier_name'].')</option>';
}
 
$listeQuartiers .= '</select>';
 
echo mb_convert_encoding($listeQuartiers, "UTF-8", "ISO-8859-15");
?>

Tu nous as donné ajax.ville.php au lieu de ajax.quartier.php

Bonjour,

fichier listeliee.js

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;
}
 
//Retourne la liste des départements d'une région
function getDpt(){
	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('champsDpt').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.dpt.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('region');
	idRegion = sel.options[sel.selectedIndex].value;
	xhr.send("idRegion="+idRegion);
}
 
//Retourne la liste des villes d'un département
function getVille(){
	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('champsVille').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.ville.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('dpt');
	idDpt = sel.options[sel.selectedIndex].value;
	xhr.send("idDpt="+idDpt);
}
 
//Retourne la liste des quartiers d'une ville
function getQuartier(){
	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('champsQuartier').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.quartier.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('ville');
    idVille = sel.options[sel.selectedIndex].value;
    xhr.send("idVille="+idVille);
 
}

fichier ajax.ville.php

<?php
require_once('liste/class/class.france.php');
 
$france = new france();
 
$villes = $france->getVilleByDpt($_POST['idDpt']);
 
$listeVilles =  '<label for="ville">Ville: </label>';
$listeVilles .= '<select name="ville" id="ville" onchange="getQuartier();">';
 
for($i=0;$i<count($villes);$i++) {
	$listeVilles .= '<option value="'.$villes[$i]['ville_id'].'">'.$villes[$i]['ville_name'].'('.$villes[$i]['ville_cp'].')</option>';
}
 
$listeVilles .= '</select>';
 
echo mb_convert_encoding($listeVilles, "UTF-8", "ISO-8859-15");
?>

fichier index.php

<?php require_once('liste/class/class.france.php');
 
	$france = new france();
	$region = $france->getRegions();
 
	echo '
		<label for="region">Région: </label>
		<select name="region" id="region" onchange="getDpt();">
			<option value="-1">Régions</option>
		';
	for($i=0;$i<count($region);$i++) {
		echo '
			<option value="'.$region[$i]['region_id'].'">'.$region[$i]['region_name'].'</option>
			';
	}
	echo '
		</select>
		';
 
	echo '
		<div id="champsDpt">
			<label for="dpt">Département: </label>
			<select name="dpt" id="dpt">
				<option value="-1">Choisir une région</option>
			</select>
		</div>
 
		<div id="champsVille">
			<label for="ville">Ville: </label>
			<select name="ville" id="ville">
				<option value="-1">Choisir un département</option>
			</select>
		</div>
 
		<div id="champsQuartier">
			<label for="quartier">Quartier: </label>
			<select name="quartier" id="quartier">
				<option value="-1">Choisir une ville</option>
			</select>
		</div>
		'; ?>

le 4eme niveau est vide, n'affiche pas une valeur alors qu'il contient un enregistrement liee au 3eme niveau

Est-ce que tu peux faire voir ton code maintenant, qu'on vérifie que tout est bien mis.

Et puis, sinon, tu peux toujours vérifier dans la page PHP que ça te retourne bien ce que tu veux.

Un problème avec ajax.quartier.php peut être, il faut que tu le teste à part.
Je me répète mais firebug et regarde le résultat de la requête ajax dans l'onglet réseau  

Bonjour,
le 4eme niveau est devenue vide ça peut etre du a quoi.
j'ai pour la table quartier un seul enregistrement en liaiason avec le troisieme.

Merci d'avance

Oui c'est ça  

edit: il fallait lire getQuartier() et pas getDpt() bien sûr

c-à-d, en ce code
$listeVilles .= '<select name="ville" id="ville" onchange="getDpt();">';

je change getDpt() par getQuartier() ?
le probleme n'est pas résolu

Dans getQuartier

sel = document.getElementById('dpt');

 idDpt = sel.options[sel.selectedIndex].value;

 xhr.send("idVille="+idVille);

à remplacer par

sel = document.getElementById('ville');

 idVille = sel.options[sel.selectedIndex].value;

 xhr.send("idVille="+idVille);

J'ai l'impression que tu ne comprends vraiment pas ce que tu fais  
Si ça ne fonctionne toujours pas, regarde avec les outils que j'ai cité plus haut si il y a bien une requête "POST ajax.quartier.php" qui part. Si oui, avec quels paramètres et quel résultat. Si non, ajoute des console.log() pour voir où ça bloque et si les variables contient bien les valeurs attendues.

Merci,

le probleme encore n'est pas résolu
quels sont les autres failles?

Tu oublies d’exécuter un getDpt() sur le changement de ville:

$listeVilles .= '<select name="ville">';

devient

$listeVilles .= '<select name="ville" id="ville" onchange="getDpt();">';

Tu devrais utiliser Firebug sous Firefox ou les Outils de développement sous Chrome, ça aide beaucoup à déboguer. Tu peux à la fois voir les requêtes Ajax et leur contenu, avoir une console pour y afficher des message de débogue avec console.log()  

edit: il fallait lire getQuartier() et pas getDpt() bien sûr  

Bonjour

j'ai fait cette modification et ça reste ne marche pas.
si y a d'autres erreurs veillez me dites quels sont.

Merci d'avance

Bonjour,

Il y a au moins une erreur dans ton code HTML, tu dois remplacer

<div id="champsquartier">

par

<div id="champsQuartier">

pour que le callback de ta requête Ajax sur le quartier fonctionne  

Bonjour
voila les données:
fichiers index.php:

<head>
		<title>Démo des listes liées en AJAX</title>
		<script type="text/javascript" src="js/listeLiees.js"></script>
		<style type="text/css">
		label {
			width: 350px;
			float: left;
		}
		select {
			width: 200px;
		}
		</style>
	</head>
 
	<body>
	<?php 
 
	require_once('class/class.france.php');
 
	$france = new france();
	$region = $france->getRegions();
 
	echo '
		<label for="region">Région: </label>
		<select name="region" id="region" onchange="getDpt();">
			<option value="-1">Régions</option>
		';
	for($i=0;$i<count($region);$i++) {
		echo '
			<option value="'.$region[$i]['region_id'].'">'.$region[$i]['region_name'].'</option>
			';
	}
	echo '
		</select>
		';
 
	echo '
		<div id="champsDpt">
			<label for="dpt">Département: </label>
			<select name="dpt" id="dpt">
				<option value="-1">Choisir une région</option>
			</select>
		</div>
 
		<div id="champsVille">
			<label for="ville">Ville: </label>
			<select name="ville" id="ville">
				<option value="-1">Choisir un département</option>
			</select>
		</div>
 
		<div id="champsquartier">
			<label for="quartier">Quartier: </label>
			<select name="quartier" id="quartier">
				<option value="-1">Choisir une ville</option>
			</select>
		</div>
		';
	?>	
	</body>

fichier ajax.dpt.php

<?php
require_once('class/class.france.php');
 
$france = new france();
 
$dpt = $france->getDptByRegion($_POST['idRegion']);
 
$listeDpt =  '<label for="dpt">Département: </label>';
$listeDpt .= '<select name="dpt" id="dpt" onchange="getVille();">';
 
for($i=0;$i<count($dpt);$i++) {
	$listeDpt .= '<option value="'.$dpt[$i]['dpt_id'].'">'.$dpt[$i]['dpt_name'].'</option>';
}
 
$listeDpt .= '</select>';
 
echo mb_convert_encoding($listeDpt, "UTF-8", "ISO-8859-15");
?>

fichier ajax.ville.php

<?php
require_once('class/class.france.php');
 
$france = new france();
 
$villes = $france->getVilleByDpt($_POST['idDpt']);
 
$listeVilles =  '<label for="ville">Ville: </label>';
$listeVilles .= '<select name="ville">';
 
for($i=0;$i<count($villes);$i++) {
	$listeVilles .= '<option value="'.$villes[$i]['ville_id'].'">'.$villes[$i]['ville_name'].'('.$villes[$i]['ville_cp'].')</option>';
}
 
$listeVilles .= '</select>';
 
echo mb_convert_encoding($listeVilles, "UTF-8", "ISO-8859-15");
?>

fichier ajax.quartier.php (le fichier que j'ai ajouter et le champ quartier que j'ai ajouter dans index.php, et qui ne repond pas)

<?php
require_once('class/class.france.php');
 
$france = new france();
 
$villes = $france->getQuartierByVille($_POST['idVille']);
 
$listeQuartiers =  '<label for="quartier">Quartier: </label>';
$listeQuartiers .= '<select name="quartier">';
 
for($i=0;$i<count($quartiers);$i++) {
	$listeQuartiers .= '<option value="'.$quartier[$i]['quartier_id'].'">'.$quartiers[$i]['quartier_name'].')</option>';
}
 
$listeQuartiers .= '</select>';
 
echo mb_convert_encoding($listeQuartiers, "UTF-8", "ISO-8859-15");
?>

et le fichier javascript qui est listeliee.js

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;
}
 
//Retourne la liste des départements d'une région
function getDpt(){
	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('champsDpt').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.dpt.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('region');
	idRegion = sel.options[sel.selectedIndex].value;
	xhr.send("idRegion="+idRegion);
}
 
//Retourne la liste des villes d'un département
function getVille(){
	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('champsVille').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.ville.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('dpt');
	idDpt = sel.options[sel.selectedIndex].value;
	xhr.send("idDpt="+idDpt);
}
 
//Retourne la liste des quartiers d'une ville
function getQuartier(){
	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('champsQuartier').innerHTML = leselect;
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax.quartier.php",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('dpt');
	idDpt = sel.options[sel.selectedIndex].value;
	xhr.send("idVille="+idVille);
}

j'ai pas pu connaitre pourquoi le 4eme niveau ne marche

Merci d'avance de m'aider

Salut,

Ca devrait être assez simple, vu que c'est la même chose que pour les autres. Mais sans ton code, on ne va pas pouvoir te dire quoi faire.
Et si tu as un message d'erreur, n'hésites pas à nous l'indiquer.