[AJAX] Trois listes liées ' région - dpt- ville '

**Tchato** · 16/03/2011, 13h14

Bonjour, en suivant le tutoriel disponible ici :

http://webcache.googleusercontent.co...=www.google.fr

je bloque sur la page html à créer pour faire le test concernant les 3 listes liées.
Voilà ce qui est préconisé, mais cela me semble incomplet.

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
Région: 
<select id="region" name="region">
	<option value="-1">Régions</option>
	<option value="'.$region[$i]['region_id'].'">'.$region[$i]['region_name'].'</option>
</select>
 
';
 
echo '
 
<div id="champsDpt">
<label for="dpt">Département: </label>
<select id="dpt" name="dpt">
		<option value="-1">Choisir une région</option>
	</select></div>
 
 
<div id="champsVille">
 
	<label for="ville">Ville: </label>
<select id="ville" name="ville">
		<option value="-1">Choisir un département</option>
	</select></div>
 
 
';
?&gt;

**Tchato** · 16/03/2011, 13h42

donc je décris

j'ai 6 fichiers.

class.mysql.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
_config = parse_ini_file('../config/config.ini', true);
		//Affecte les variables selon l'environnment (production ou préproduction)
		$this-&gt;_host = $this-&gt;_config['mysql']['host'];
		$this-&gt;_user = $this-&gt;_config['mysql']['user'];
		$this-&gt;_password = $this-&gt;_config['mysql']['password'];
		$this-&gt;_database = $this-&gt;_config['mysql']['database'];
		//connexion au serveur avec PDO
		try {
			$this-&gt;_dbh = new PDO('mysql:host='.$this-&gt;_host.';dbname='.$this-&gt;_database,
			$this-&gt;_user, $this-&gt;_password);
		} catch (PDOException $e) {
			echo 'Erreur de connexion sur le serveur de préproduction: '.$e-&gt;getMessage().' ';
		}
	}
 
	/**
	* Permet de préparer un requête SQL
	*
	* @param string $req
	* @return stdClass
	*/
	public function prepare($req)
	{
		$sth = $this-&gt;_dbh-&gt;prepare($req);
		return $sth;
	}
}
?&gt;

class.france.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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
prepare('SELECT region_id, region_name
		FROM region');
 
		$prepare-&gt;execute();
		$regions = $prepare-&gt;fetchAll();
 
		return $regions;
	}
 
	/**
	* Méthode qui retourne les info d'une région selon son id
	*
	* @param int $id
	* @return array
	*/
	public function getRegionById($id)
	{
		$prepare = $this-&gt;prepare('SELECT region_id, region_name
		FROM region
		WHERE region_id = :id');
 
		$prepare-&gt;execute(array(':id' =&gt; $id));
		$region = $prepare-&gt;fetchAll();
 
		return $region;
	}
 
	/**
	* Méthode qui retourne la liste des départements d'une région
	*
	* @param int $id
	* @return array
	*/
	public function getDptByRegion($id)
	{
		$prepare = $this-&gt;prepare("SELECT dpt_id, dpt_name
		FROM departement
		WHERE region_id = :region_id");
 
		$prepare-&gt;execute(array(':region_id' =&gt; $id));
		$dpt = $prepare-&gt;fetchAll();
 
		return $dpt;
	}
 
	/**
	* Méthode qui retounre la liste des ville d'un département
	*
	* @param int $id
	* @return array
	*/
	public function getVilleByDpt($id)
	{
		$prepare = $this-&gt;prepare("SELECT ville_id, ville_name, ville_cp
		FROM ville
		WHERE dpt_id = ?");
 
		$prepare-&gt;execute(array($id));
		$villes = $prepare-&gt;fetchAll();
 
		return $villes;
	}
}
?&gt;

listeLiees.js

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
// JavaScript Document
 
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 &amp;amp;amp;  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 &amp;amp;amp; xhr.status == 200){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('champsVille').innerHTML = leselect;
		}
	}
	xhr.open("POST","ajax.ville.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('dpt');
	idDpt = sel.options[sel.selectedIndex].value;
	xhr.send("idDpt="+idDpt);
}

ajax.dpt.php

Code :

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

1
2
3
4
5
6
Département: ";
$listeDpt .= '
<select id="dpt" name="dpt"> <option value="'.$dpt[$i]['dpt_id'].'">'.$dpt[$i]['dpt_name'].'</option> </select> ";
 
echo mb_convert_encoding($listeDpt, "UTF-8", "ISO-8859-15");
?&gt;

ajax.ville.php

Code :

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

1
2
3
4
5
6
Ville: ";
$listeVilles .= '
<select name="ville"> <option value="'.$villes[$i]['ville_id'].'">'.$villes[$i]['ville_name'].'('.$villes[$i]['ville_cp'].')</option> </select> ";
 
echo mb_convert_encoding($listeVilles, "UTF-8", "ISO-8859-15");
?&gt;

le fichier config.ini qui recèle les données de ma base.

**andry.aime** · 16/03/2011, 17h12

Bonsoir,

Le liens que tu as nous donné est corrompu

. Tes select n'appellent aucun fonction dans le onchange.
Sur le forum AJAX, on a besoin que le code HTML généré de la page qui contient la fonction AJAX et le code de la page appelée si c'est nécesaire.

Pour faire trois liste liées

http://www.developpez.net/forums/d77...x/#post4489970

A+.

**Tchato** · 17/03/2011, 12h31

C'est ce problème que j'ai, je n'arrive pas à appeler les fonctions dans le Onchange. Je regarde ton lien de suite.

[AJAX] Trois listes liées ' région - dpt- ville '

AJAX

Discussions similaires

Partager

Partager