Listes mises en relation par AJAX
Posté : 16 janv. 2006, 11:11
Voici une méthode un peut complexe mais qui utilise Ajax pour mettre à jour des listes mise en relations.
La page principale est écrite en HTML/AJAX
Principal.HTM
Ici la base de données est sous forme de tableaux pour simplifier l'exemple.
Liste.php
La page principale est écrite en HTML/AJAX
Principal.HTM
<script>
function ajax_Response(URL){
if(window.XMLHttpRequest) // Hors IE
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // IE
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else
return(false);
//Ouvrir URL
xhr_object.open("GET", URL, false);
xhr_object.send(null);
//Attendre la réponse
if(xhr_object.readyState == 4) return(xhr_object.responseText);
else return(false);
}
//Evénement "onChange" implémenté pour la liste
function liste_change(liste){
if (liste){
if (liste.name=="pays"){
//Si la liste des pays est modifiée alors reconstruire les listes département et ville selon le pays choisi
document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement&pays="+liste.value);
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
}
if (liste.name=="departement")
//Si la liste des départements est modifiée alors reconstruire la liste ville selon le département choisi
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville&departement="+liste.value);
}
else {
//Au démarrage aucune liste n'est modifiée : Construire alors les 3 listes (pays, département et ville)
document.all["div_liste_pays"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=pays");
document.all["div_liste_departement"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=departement");
document.all["div_liste_ville"].innerHTML = ajax_Response ("http://localhost/test/bdd/liste.php?liste=ville");
}
}
</script>
<body onLoad="liste_change(null); //Démarrage">
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_pays"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_departement"></Div>
<p>Blabla
<p>Blabla
<p>Blabla
<p>Blabla
<Div id="div_liste_ville"></Div>
Ici la base de données est sous forme de tableaux pour simplifier l'exemple.
Liste.php
<?php
extract ($_GET);
if ($liste == "pays"){
//Liste des pays
$pays = array ("1"=>"Pays 1","2"=>"Pays 2","3"=>"Pays 3");
$titre = "Pays";
$nom = "pays";
$option_selectionnée = $_GET[pays]?$_GET[pays]:"1";
//Affichage de la liste
liste($titre, $nom, $pays, $option_selectionnée);
}
if ($liste == "departement"){
//Liste des villes par pays
switch ($_GET[pays]){
case "1": $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
case "2": $departements = array("2.1"=>"Département 2.1", "2.2"=>"Département 2.2"); break;
case "3": $departements = array("3.1"=>"Département 3.1", "3.2"=>"Département 3.2", "3.3"=>"Département 3.3", "3.4"=>"Département 3.4"); break;
default : $departements = array("1.1"=>"Département 1.1", "1.2"=>"Département 1.2", "1.3"=>"Département 1.3"); break;
}
$titre = "Département";
$nom = "departement";
$option_selectionnée = $_GET[departement]?$_GET[departement]:"";
//Affichage de la liste
liste($titre, $nom, $departements, $option_selectionnée);
}
if ($liste == "ville"){
//Liste des villes par pays
switch ($_GET[departement]){
case "1.1": $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
case "1.2": $villes = array("1.2.1"=>"Ville 1.2.1", "1.2.2"=>"Ville 1.2.2"); break;
case "1.3": $villes = array("1.3.1"=>"Ville 1.3.1", "1.3.2"=>"Ville 1.3.2"); break;
case "2.1": $villes = array("2.1.1"=>"Ville 2.1.1", "2.1.2"=>"Ville 2.1.2"); break;
case "2.2": $villes = array("2.2.1"=>"Ville 2.2.1", "2.2.2"=>"Ville 2.2.2"); break;
case "3.1": $villes = array("1.1.1"=>"Ville 3.1.1", "1.1.1"=>"Ville 3.1.2"); break;
case "3.2": $villes = array("3.2.1"=>"Ville 3.2.1", "3.2.2"=>"Ville 3.2.2"); break;
case "3.3": $villes = array("3.3.1"=>"Ville 3.3.1", "3.3.2"=>"Ville 3.3.2"); break;
case "3.4": $villes = array("3.4.1"=>"Ville 3.4.1", "3.4.2"=>"Ville 3.4.2"); break;
default : $villes = array("1.1.1"=>"Ville 1.1.1", "1.1.2"=>"Ville 1.1.2"); break;
}
$titre = "Ville";
$nom = "ville";
$option_selectionnée = $_GET[ville]?$_GET[ville]:"";
//Affichage de la liste
liste($titre, $nom, $villes, $option_selectionnée);
}
//Code de construction d'un objet liste HTML
function liste($titre="Liste 1", $nom="Liste1", $options=array(), $option_selectionnée=""){
echo "$titre <SELECT name=\"$nom\" onChange=\"liste_change(this);\"><OPTION value=\"\">---</OPTION>";
if ($options)
foreach ($options as $valeur=>$texte)
echo "<OPTION value=\"$valeur\"".($valeur==$option_selectionnée?" SELECTED ":"").">$texte</OPTION>";
echo "</SELECT>";
}
?>