[AJAX] Trois listes liées ' région - dpt- ville '
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:
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>
';
?> |
le lien ne passe plus apparement
donc je décris
j'ai 6 fichiers.
class.mysql.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
| _config = parse_ini_file('../config/config.ini', true);
//Affecte les variables selon l'environnment (production ou préproduction)
$this->_host = $this->_config['mysql']['host'];
$this->_user = $this->_config['mysql']['user'];
$this->_password = $this->_config['mysql']['password'];
$this->_database = $this->_config['mysql']['database'];
//connexion au serveur avec PDO
try {
$this->_dbh = new PDO('mysql:host='.$this->_host.';dbname='.$this->_database,
$this->_user, $this->_password);
} catch (PDOException $e) {
echo 'Erreur de connexion sur le serveur de préproduction: '.$e->getMessage().' ';
}
}
/**
* Permet de préparer un requête SQL
*
* @param string $req
* @return stdClass
*/
public function prepare($req)
{
$sth = $this->_dbh->prepare($req);
return $sth;
}
}
?> |
class.france.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
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->execute();
$regions = $prepare->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->prepare('SELECT region_id, region_name
FROM region
WHERE region_id = :id');
$prepare->execute(array(':id' => $id));
$region = $prepare->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->prepare("SELECT dpt_id, dpt_name
FROM departement
WHERE region_id = :region_id");
$prepare->execute(array(':region_id' => $id));
$dpt = $prepare->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->prepare("SELECT ville_id, ville_name, ville_cp
FROM ville
WHERE dpt_id = ?");
$prepare->execute(array($id));
$villes = $prepare->fetchAll();
return $villes;
}
}
?> |
listeLiees.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
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; 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; 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:
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");
?> |
ajax.ville.php
Code:
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");
?> |
le fichier config.ini qui recèle les données de ma base.
