Listes déroulantes dynamiques en AJAX

I. Introduction à l’AJAX

Pour commencer, l’idée de réaliser ce tutoriel m’est venue grâce à vos interventions et demandes sur le forum. Je remercie donc toutes les personnes qui participent et contribuent à la vie de notre forum d’aide informatique. L’idée de ce tutoriel m’est venue en lisant par exemple les sujets Récupérer une donnée d’une balise SELECT en PHP ou encore Besoin d’aide devis, et on pourrait très bien envisager d’utiliser ce que je vais vous expliquer avec le formulaire HTML d’un de mes précédents tutoriels.

On nous a plusieurs fois demandé comment alimenter une liste déroulante “B” en tenant compte de la valeur de la liste déroulante “A” qu’un utilisateur a choisi, tout en sachant que les valeurs de la liste “B” seraient extraites d’une base de données. Si les valeurs n’étaient pas prises dans une base de données, vous pourriez faire une simple fonction javascript qui les changent dynamiquement sans recharger la page. Mais imaginez que ma liste “A” contienne 15 catégories, et que ma liste “B” doit afficher une vingtaine de sous-catégories en fonction du choix de catégorie… Là ça commence à faire beaucoup et la gestion de ces données dans une base de données s’impose.

Dans ce tutoriel je vais continuer sur l’exemple que je viens de citer, qui est assez simple à comprendre pour vous et c’est bien là l’intérêt. Pour réaliser cela, nous allons utiliser la bibliothèque XAJAX qui va vous permettre d’implémenter l’AJAX (non ce n’est pas une lessive je vous vois venir 😉 sans trop vous prendre la tête. Voici à quoi ressemblera l’exemple :

tutoriel xajax image 1

II. Explications

1. Télécharger XAJAX

La première chose à faire va être de télécharger la bibliothèque XAJAX. Pour cela il vous suffit d’aller sur le site officiel du projet open source : http://xajaxproject.org/

Vous aurez ensuite un lien qui s’appelle “Download Now” pour télécharger la librairie :

tutoriel xajax image 2

A quoi va nous servir XAJAX ?
Xajax est une bibliothèque open source qui permet de créer des applications basées sur la technologie AJAX. L’Ajax n’est en fait qu’un mélange de HTML, CSS, javascript et PHP qui peut appelé des fonctions PHP du côté serveur et mettre à jour le contenu d’une page web sans aucun rechargement de page !

Il existe pas mal de librairies permettant d’implémenter l’Ajax facilement dans vos pages web, Xajax est l’une de celles-ci.

2. Les tables MySQL

Pour l’exemple qui va suivre, sachez que j’ai créé deux tables nommées “categories” et “souscategories” dans ma base de données nommée “test”.
Voici ce que contient la table “categories” :

tutoriel xajax image 3

Il y a juste un numéro identifiant unique de la catégorie et le nom de celle-ci.
Et la table “souscategories” :

tutoriel xajax image 4

Il y a un numéro identifiant unique pour chaque sous-catégories, le numéro identifiant de la catégorie parente et le titre de chacune des sous-catégories.

3. Création du formulaire

Commençons tout d’abord par créer une page web HTML et un formulaire assez banal contenant deux listes déroulantes de type SELECT :

Mettez bien des “id” sur chaque liste déroulante, car ces propriétés vont nous servir par la suite. Pour réaliser l’exemple, j’ai mis id=”liste_cat” pour la liste déroulante du choix de catégorie et id=”liste_souscat” pour la liste concernant les sous-catégories. En résultat vous devez avoir :

tutoriel xajax image 5

Nous allons maintenant alimenter la première liste déroulante (catégorie) avec les valeurs de notre base de données. Pour cela il va falloir que notre page se connecte à la table de notre base de données dans un premier temps, puis qu’elle aille lire les catégories et créé une option de liste déroulante pour chacune d’elle. Voici donc ce que nous allons ajouter :

<?php
// Configuration MySQL
$host_db = "localhost";
$user_db = "root";
$password_db = "mot de passe ";
$bdd_db = "test";

// connexion a la base de donnees et selection de la table
$connect_db = mysql_connect($host_db,$user_db,$password_db);
mysql_select_db($bdd_db,$connect_db);

?>

Désormais si vous regardez le résultat sur votre page web, et si la connexion à votre base de données se fait bien, vous devriez avoir les catégories qui s’affichent dans votre première liste déroulante :

tutoriel xajax image 6

4. Utilisation de XAJAX

Jusque là, rien n’était infaisable si vous aviez suivi les précédents tutoriels du site sur la création d’un formulaire…
Maintenant ce qui va plus nous intéresser ici, c’est l’affichage dynamique des données dans la deuxième liste déroulante, celle des sous-catégories. C’est là que nous allons faire intervenir la libraire Xajax pour utiliser l’ajax.

Le principe va être le suivant. Tout d’abord il va falloir inclure le fichier de la librairie avant de pouvoir l’utiliser :

require_once("../xajax.inc.php");

Attention : dans mon cas le fichier se situe dans le répertoire parent, d’où le “../”, adaptez suivant votre cas de figure bien entendu.

Puis nous allons créer une fonction qui va permettre de sélectionner les bonnes sous-catégories en base de données en fonction d’une catégorie donnée. Nous allons en avoir besoin par la suite. Je l’ai appelée “SelectSouscat” :

function SelectSouscat($catid)
{
   $options="";
   // créé un nouvel objet permettant d'envoyer une réponse au côté client
   $objResponse = new xajaxResponse();
   // on selectionne les sous-catégorie en fonction de l'id de la catégorie mère
   $sql="SELECT id,titre FROM souscategories WHERE id_cat_mere = '".$catid."'";
   $req=mysql_query($sql);
   while ($souscat = mysql_fetch_array($req))
   {
      // on place toutes les sous-catégories dans des options valables pour la liste SELECT
      $options .= '' . $souscat['titre'] . '';
   }

   // l'Ajax remplacera le innerHTML (html intérieur) de la liste_souscat pour y mettre $options
   $objResponse->addAssign("liste_souscat","innerHTML",$options);
   // envoie la réponse en XML
   return $objResponse->getXML();

}

Puis nous allons instancier un nouvel objet xajax, lui faire enregistrer la fonction que nous venons de créer, puis commencer à prendre en compte les demandes sur la page web avec processRequests()

$xajax = new xajax();
// remarquez que l'on peut passer en mode debug en décommentant la ligne suivante
//$xajax->debugOn();
$xajax->registerFunction("SelectSouscat");
$xajax->processRequests();

Nous y sommes presque, il va maintenant falloir inclure une ligne entre les balises de votre page. Cette ligne générera du javascript dont xajax a besoin. Il faut spécifier le répertoire dans lequel se trouve “xajax_js”, le répertoire des javascript (pour ma part le répertoire parent) :

printJavascript("../") ?>

Pour finir, nous allons mettre en place l’action qui va se déclencher sur la première liste déroulante (catégories). Pour cela, nous allons utiliser l’évènement “onchange” de cette liste déroulante pour y inclure notre fonction “SelectSouscat” précédée de “xajax_” pour signaler que cette fonction doit être gérée par XAJAX. Notre liste déroulante “liste_cat” ressemblera maintenant à ceci :

<select id="liste_cat" onchange="if (!window.__cfRLUnblockHandlers) return false; xajax_SelectSouscat(this.value)" data-cf-modified-a3c646c2b4b0bc3889cd82c7-="">

Notez que le “this.value” permet de récupérer la valeur sélectionnée et donc le numéro id de la catégorie, pour la passer à la fonction. Xajax pourrait récupérer d’autres valeurs du formulaire dans l’hypothèse où vous faites quelque chose de plus complexe que cet exemple, mais je vous épargne ça pour le moment.

C’est terminé ! Le résultat est le suivant, si je sélectionne une catégorie (exemple “Archivage”), j’ai bien ses sous-catégories qui apparaissent :

Et si j’en sélectionne une autre :

J’ai également les sous-catégories correspondantes qui apparaissent.

5. Code récapitulatif

Et voici enfin la totalité du code que je viens d’expliquer, afin que vous y voyiez plus clair peut-être :

<?php
// Configuration MySQL
$host_db = "localhost";
$user_db = "root";
$password_db = "mot de passe ";
$bdd_db = "test";</p>
<p>// connexion a la base de donnees et selection de la table 
$connect_db = mysql_connect($host_db,$user_db,$password_db);
mysql_select_db($bdd_db,$connect_db);</p>
<p>require_once("../xajax.inc.php");</p>
<p>function SelectSouscat($catid)
{
$options="";
// créé un nouvel objet permettant d'envoyer une réponse au côté client 
$objResponse = new xajaxResponse();
// on selectionne les sous-catégorie en fonction de l'id de la catégorie mère
$sql="SELECT id,titre FROM souscategories WHERE id_cat_mere = '".$catid."'";
$req=mysql_query($sql);
while ($souscat = mysql_fetch_array($req))
{
// on place toutes les sous-catégories dans des options valables pour la liste SELECT 
$options .= '<option value="'.$souscat['id'].'">'.$souscat['titre'].'</option>';
}</p>
<p> // l'Ajax remplacera le innerHTML (html intérieur) de la liste_souscat pour y mettre $options
$objResponse->addAssign("liste_souscat","innerHTML",$options);
// envoie la réponse en XML
return $objResponse->getXML();
}</p>
<p>$xajax = new xajax();
//$xajax->debugOn();
$xajax->registerFunction("SelectSouscat");
$xajax->processRequests();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test de select dynamiques</title>
<?php $xajax->printJavascript("../") ?>
</head>
<body></p>
<p><h1>Test de select dynamiques</h1>
</p>
<p><form id="testForm1">
Choisissez une catégorie : <select id="liste_cat" onchange="if (!window.__cfRLUnblockHandlers) return false; xajax_SelectSouscat(this.value)" data-cf-modified-a3c646c2b4b0bc3889cd82c7-="">
<option value=""></option>
<?php
$sql="SELECT id_categorie, categorie FROM categories ORDER BY categorie ASC";
$req=mysql_query($sql) or die(mysql_error());
while($cat = mysql_fetch_array($req))
{
echo '<option value="'.$cat['id_categorie'].'">' . $cat['categorie'] . '</option>';
}
?>
</select>
Choisissez une sous-catégorie : <select id="liste_souscat">
</select>
</form></p>
<p></body>
</html>

III. Conclusion du tutorial

Pour conclure, vous venez de voir un exemple basique (et peut-être stupide en tant que tel) d’utilisation de l’Ajax pour remplir dynamiquement des listes déroulantes avec des valeurs provenant de base de données. J’espère que vous avez compris le principe, c’était le seul but de ce tutoriel, vous pourrez ensuite l’appliquer à d’autres éléments HTML que des listes déroulantes et faire beaucoup d’autres choses en partant de ça.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*