Voici le code PHP dans ma page compositions.PHP (ou se trouve les 2 listes) :
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "compositeur";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Liste déroulantes dynamiques liées</title>
<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée via un objet XHR lors d'une sélection sur la première." />
<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />
<meta name="author" content="Cyrano" />
<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="./titres_xhr.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données de la première liste */
$sql = "SELECT `id_orchestre` AS idr, `orchestre` ".
"FROM `orchestre` ".
"ORDER BY `id_orchestre`;";
/* Connexion et exécution de la requête */
$connexion = mysql_connect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$recherche = mysql_query($sql, $connexion);
/* Création du tableau PHP des valeurs récupérées */
$orchestre = array();
/* Index du titre par tableau orchestral */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$orchestre[$ligne['idr']] = $ligne['orchestre'];
}
?>
<h3></h3>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgtitre">
<legend></legend>
<select name="orchestre" id="orchestre" onChange="getTitres(this.value);">
<option value="vide">- - - Choisissez un orchestre - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($orchestre as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocTitres"></span><br />
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form><BR>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>
Voici le fichier javascript (titre_xhr.js) :
[javascript]
/**
* Lister les titres d'un orchestre avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour <img src="
images/smilies/icon_wink.gif" alt=";)" title="Wink" /> */
requete = null;
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserTitres()
{
var listeTitre = requete.responseText;
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = listeTitre;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getTitres(idr)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idr == 'vide')
{
document.getElementById('blocTitres').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'titres.php?idr='+ idr;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserTitres();
}
}
};
requete.send(null);
}
}
[/javascript]
Et le code PHP du fichier titres.PHP :
<?php
/**
* Code qui sera aeeplé par un objet XHR et qui
* retournera la liste déroulante des titres
* correspondant à l'orchestre sélectionnée.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "compositeur";
/* On récupère l'identifiant de l'orchestre choisie. */
$idr = isset($_GET['idr']) ? $_GET['idr'] : false;
/* Si on a un orchestre, on procède à la requête */
if(false !== $idr)
{
/* Cération de la requête pour avoir les titres de cet orchestre */
$sql2 = "SELECT `id_titre`, `titre`, 'lien_titre'".
" FROM `compositions`".
" WHERE `id_orchestre` = ". $idr ."".
" ORDER BY `titre`;";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$rech_titre = mysql_query($sql2, $connexion);
/* Un petit compteur pour les titres */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des titres */
$code_titre = array();
$nom_titre = array();
/* On va mettre les numéros et noms des titres dans les deux tableaux */
while(false != ($ligne_titre = mysql_fetch_assoc($rech_titre)))
{
$code_titre[] = $ligne_titre['id_titre'];
$nom_titre[] = $ligne_titre['titre'];
$lien_titre[] = $ligne_titre['lien_titre'];
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
$liste = "";
$liste .= '<select name="titre" id="titre">'."\n";
for($d = 0; $d < $nd; $d++)
{
$liste .= ' <option value="'. $code_titre[$d] .'">'. $nom_titre[$d] .'</option>'."\n";
}
$liste .= '</select>'."\n";
/* Un petit coup de balai */
mysql_free_result($rech_titre);
/* Affichage de la liste déroulante */
echo($liste);
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. La région sélectionnée comporte une donnée invalide.</p>\n");
}
?>
Voici le code PHP dans ma page compositions.PHP (ou se trouve les 2 listes) :
[php]<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
/* Variables de connexion : ajustez ces paramètres selon votre propre environnement */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "compositeur";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Liste déroulantes dynamiques liées</title>
<meta name="description" content="Listes dynamiques liées: la seconde liste est modifiée via un objet XHR lors d'une sélection sur la première." />
<meta name="keywords" content="menu,déroulant,select,liées,JavaScript" />
<meta name="author" content="Cyrano" />
<meta name="generator" content="Zend Studio Environnement et WebExpert 5" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<script type="text/javascript" src="./titres_xhr.js" charset="iso_8859-1"></script>
<?php
/* Requête SQL de récupération des données de la première liste */
$sql = "SELECT `id_orchestre` AS idr, `orchestre` ".
"FROM `orchestre` ".
"ORDER BY `id_orchestre`;";
/* Connexion et exécution de la requête */
$connexion = mysql_connect($serveur, $admin, $mdp);
if($connexion != false)
{
$choixbase = mysql_select_db($base, $connexion);
$recherche = mysql_query($sql, $connexion);
/* Création du tableau PHP des valeurs récupérées */
$orchestre = array();
/* Index du titre par tableau orchestral */
$id = 0;
while($ligne = mysql_fetch_assoc($recherche))
{
$orchestre[$ligne['idr']] = $ligne['orchestre'];
}
?>
<h3></h3>
<form action="<?php echo($_SERVER['PHP_SELF']); ?>" method="post" id="chgtitre">
<legend></legend>
<select name="orchestre" id="orchestre" onChange="getTitres(this.value);">
<option value="vide">- - - Choisissez un orchestre - - -</option>
<?php
/* Construction de la première liste : on se sert du tableau PHP */
foreach($orchestre as $nr => $nom)
{
?>
<option value="<?php echo($nr); ?>"><?php echo($nom); ?></option>
<?php
}
?>
</select>
<!-- ICI, le secret : on met un bloc avec un id ou va s'insérer le code de
la seconde liste déroulande -->
<span id="blocTitres"></span><br />
<input type="submit" name="ok" id="ok" value="Envoyer" />
</fieldset>
</form><BR>
<?php
}
else
{
/* Si vous arrivez ici, vous avez un gros problème avec la connexion au serveur de base de données */
?>
<p>La connexion au serveur de base de données a échoué. Aucun élément ne peut être affiché.</p>
<?php
}
?>[/php]
Voici le fichier javascript (titre_xhr.js) :
[javascript]
/**
* Lister les titres d'un orchestre avec un objet
* XMLHTTPRequest.
*/
/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/**
* Fonction privée qui va créer un objet XHR.
* Cette fonction initialisera la valeur dans la variable globale définie
* ci-dessus.
*/
function creerRequete()
{
try
{
/* On tente de créer un objet XmlHTTPRequest */
requete = new XMLHttpRequest();
}
catch (microsoft)
{
/* Microsoft utilisant une autre technique, on essays de créer un objet ActiveX */
try
{
requete = new ActiveXObject('Msxml2.XMLHTTP');
}
catch(autremicrosoft)
{
/* La première méthode a échoué, on en teste une seconde */
try
{
requete = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(echec)
{
/* À ce stade, aucune méthode ne fonctionne... mettez donc votre navigateur à jour <img src="http://forum.phpfrance.com/images/smilies/icon_wink.gif" alt=";)" title="Wink" /> */
requete = null;
}
}
}
if(requete == null)
{
alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
}
}
/**
* Fonction privée qui va mettre à jour l'affichage de la page.
*/
function actualiserTitres()
{
var listeTitre = requete.responseText;
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = listeTitre;
}
/**
* Fonction publique appelée par la page affichée.
* Cette fonction va initialiser la création de l'objet XHR puis appeler
* le code serveur afin de récupérer les données à modifier dans la page.
*/
function getTitres(idr)
{
/* Si il n'y a pas d'identifiant de région, on fait disparaître la seconde liste au cas où elle serait affichée */
if(idr == 'vide')
{
document.getElementById('blocTitres').innerHTML = '';
}
else
{
/* À cet endroit précis, on peut faire apparaître un message d'attente */
var blocListe = document.getElementById('blocTitres');
blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
/* On crée l'objet XHR */
creerRequete();
/* Définition du fichier de traitement */
var url = 'titres.php?idr='+ idr;
/* Envoi de la requête à la page de traitement */
requete.open('GET', url, true);
/* On surveille le changement d'état de la requête qui va passer successivement de 1 à 4 */
requete.onreadystatechange = function()
{
/* Lorsque l'état est à 4 */
if(requete.readyState == 4)
{
/* Si on a un statut à 200 */
if(requete.status == 200)
{
/* Mise à jour de l'affichage, on appelle la fonction apropriée */
actualiserTitres();
}
}
};
requete.send(null);
}
}
[/javascript]
Et le code PHP du fichier titres.PHP :
[php]
<?php
/**
* Code qui sera aeeplé par un objet XHR et qui
* retournera la liste déroulante des titres
* correspondant à l'orchestre sélectionnée.
*/
/* Paramètres de connexion */
$serveur = "localhost";
$admin = "root";
$mdp = "";
$base = "compositeur";
/* On récupère l'identifiant de l'orchestre choisie. */
$idr = isset($_GET['idr']) ? $_GET['idr'] : false;
/* Si on a un orchestre, on procède à la requête */
if(false !== $idr)
{
/* Cération de la requête pour avoir les titres de cet orchestre */
$sql2 = "SELECT `id_titre`, `titre`, 'lien_titre'".
" FROM `compositions`".
" WHERE `id_orchestre` = ". $idr ."".
" ORDER BY `titre`;";
$connexion = mysql_connect($serveur, $admin, $mdp);
mysql_select_db($base, $connexion);
$rech_titre = mysql_query($sql2, $connexion);
/* Un petit compteur pour les titres */
$nd = 0;
/* On crée deux tableaux pour les numéros et les noms des titres */
$code_titre = array();
$nom_titre = array();
/* On va mettre les numéros et noms des titres dans les deux tableaux */
while(false != ($ligne_titre = mysql_fetch_assoc($rech_titre)))
{
$code_titre[] = $ligne_titre['id_titre'];
$nom_titre[] = $ligne_titre['titre'];
$lien_titre[] = $ligne_titre['lien_titre'];
$nd++;
}
/* Maintenant on peut construire la liste déroulante */
$liste = "";
$liste .= '<select name="titre" id="titre">'."\n";
for($d = 0; $d < $nd; $d++)
{
$liste .= ' <option value="'. $code_titre[$d] .'">'. $nom_titre[$d] .'</option>'."\n";
}
$liste .= '</select>'."\n";
/* Un petit coup de balai */
mysql_free_result($rech_titre);
/* Affichage de la liste déroulante */
echo($liste);
}
/* Sinon on retourne un message d'erreur */
else
{
echo("<p>Une erreur s'est produite. La région sélectionnée comporte une donnée invalide.</p>\n");
}
?>[/php]
