3 Listes liées en Ajax

On a besoin quelque fois pour un formulaire qui utilise une base de données d'avoir une ou des listes déroulantes qui sont remplies dynamiquement avec des données provenant d'une table.

Pour le cas ici nous allons voir comment avoir 3 listes déroulantes liées entre elles avec des données issues d'une table d'une base données.

La base de données

Pour notre exercice, vous devez avoir une base de données avec une table ayant au moins 3 champs. Les listes préentées ici peuvent utiliser comme table par exemple regroupant les départements, les villes et les code postaux. Tout dépend du type d'applications pour lesquelles vous voulez les utiliser.
Donc, notre table d'exemple sera la table (employes) ayant les NOM, POSTE, MAT.

Installation

Dans votre page, insérer au dessus du DOCTYPE le code ci-dessous. Dans ce code on déclare un tableau avec les paramètres des noms des champs de la table impliquant le champ du formulaire. Vous remarquerez que l'on inclus le fichier (employe.php), ce fichier contiendra les requêtes SQL.

          <?php
          $personne = array(
          "NOM"=>@$_POST["list0"],
          "MAT"=>@$_POST["list1"],
          "POSTE"=>@$_POST["list2"],
          );
          include("employe.php");
          ?>   
          


Le JavaScript

Le code JavaScript Ajax de mise à jour des listes déroulantes doit s'insérer entre les balise <head> de votre page.

          <script language="JavaScript">
          // Mise à jour des listes via XMLHttpRequest
          function liste(f,q,t) {
          var l1    = f.elements["list"+(q-1)];
          var l2    = f.elements["list"+q];
          var index = l1.selectedIndex;
          for(i=q;i<=t;i++) f.elements["list"+i].options.length = 0;
          if(index > 0) {
          var xhr_object = null;
          
          if(window.XMLHttpRequest) // Firefox
          xhr_object = new XMLHttpRequest();
          else if(window.ActiveXObject) // Internet Explorer
          xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
          else { // XMLHttpRequest non supporté par le navigateur
          alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
          return;
          }
          xhr_object.open("POST", "employe.php?q="+q, true);
          
          xhr_object.onreadystatechange = function() {
          if(xhr_object.readyState == 4)
          eval(xhr_object.responseText);
          }
          xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          var data = "champ="+escape(l1.options[index].value)
          +"&form="+f.name+"&select=list"+q;
          xhr_object.send(data);
          }
          }
          // Mise à jour du selectedIndex d'une liste
          function update(L) {
          v = new Array;
          v[0] = "<?php echo $personne["NOM"];?>";
          v[1] = "<?php echo $personne["MAT"];?>";
          v[2] = "<?php echo $personne["POSTE"];?>";
          if(v[L]=="") return;
          f = document.forms.form1;
          L0 = f.elements["list"+L];
          for(i=0;i<L0.options.length;i++)
          if(L0.options[i].value==v[L]) {
          L0.selectedIndex=i;
          if(L<2) liste(f,L+1,2);
          //window.onload="update(0)";
          break;
          }
          }
          </script>
          

Ci-dessous le formulaire avec les listes déroulantes.

          <form id="form1" name="form1" method="POST" action="">
          <table width="60%" border="0" align="center">
          <tr>
          <th>Nom : </th>
          <td>
          <select class="select1" name="list0" id="list0" onChange="liste(this.form,1,2)">
          <option value="">== Choisir un nom ==</option>
          <?php echo $liste_nom ?>
          </select>
          </td>
          </tr>
          <tr>
          <th>Matricule : </th>
          <td>
          <select class="select2" name="list1" id="list1" onChange="liste(this.form,2,2)"></select>
          </td>
          </tr>
          <tr>
          <th>Poste : </th>
          <td><select class="select1" name="list2" id="list2"></select></td>
          </tr>
          </table>
          </form>
          

Les requêtes SQL

Ci dessous le fichier (employe.php) regroupant les requêtes nécessaires à la table (employes)

          <?php
          $table = "employes";
          $db = mysql_connect('localhost', 'root', '****');
          mysql_select_db('entreprise', $db);
          switch($q=@$_GET["q"]) {
          case "1": // Liste des noms
          //mysql_select_db($database_cnx_annonce, $cnx_annonce);
          $query  = "SELECT DISTINCT MAT FROM $table"
          . " WHERE NOM = '".$_POST["champ"]."' ORDER BY 1"; 
          
          case "2": // Liste des postes
          //mysql_select_db($database_cnx_annonce, $cnx_annonce);
          if(!@$query) $query  = "SELECT POSTE FROM $table"
          . " WHERE MAT = '".$_POST["champ"]."' ORDER BY 1";
          echo 'var o = null;'; 
          echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];'; 
          echo 's.options.length = 0;';
          if($q<2) echo 's.options[s.options.length] = new Option("Choisir","");';
          $result = @mysql_query($query); 
          while($r = mysql_fetch_array($result)) 
          echo 's.options[s.options.length] = new Option("'.$r[0].'","'.((@$r[1])?$r[1]:$r[0]).'");';
          echo 'update('.$q.');';
          break;
          default: // Liste des noms
          $liste_nom = "";
          //mysql_select_db($database_cnx_annonce, $cnx_annonce);
          $SQL = "SELECT DISTINCT NOM FROM $table ORDER BY 1";
          $res = mysql_query($SQL);
          while($val = mysql_fetch_array($res))
          $liste_nom .= "<option value=\"".$val[0]."\">".$val[0]."</option>\n";
          if(@$adresse["POSTE"]) {
          //mysql_select_db($database_cnx_annonce, $cnx_annonce);
          $SQL = "SELECT POSTE FROM $table ";
          $res = mysql_query($SQL);
          $adresse["POSTE"] = mysql_result($res,0,0);
          }
          }
          @mysql_close();
          ?>
          

Astuces pour Dreamweaver

Si vous souhaitez utiliser ces listes liées en Ajax dans une application créé avec Dreamweaver, c'est tout à fait possible.
Dans la page principale celle qui accueil le formulaire, la balise <body> doit être modifié comme ceci <body onLoad="update(0)">. Hors vous devez savoir que si votre page utilise un Template créé avec Dreamweaver la balise <body> n'est plus modifiable, elle l'est seulement dans le fichier du Templates. Si vous utilisez un Template pour toutes vos page vous pouvez omettre d'uliser la fonction update dans la balise <body>, cela fonctionne aussi bien.

Concernant le fichier (employe.php) la aussi si vous avez réalisé une application avec Dreamweaver qui utilise déjà un fichier de connexion, vous devez simplement à la place du code de connexion actuel inclure le fichier de connexion de votre application.
Ensuite, vous devez ajouter au dessus de chacune des requêtes ce code mis en commentaire (//mysql_select_db($database_cnx_annonce, $cnx_annonce);) qui précise la fonction mysql_select_db() de votre fichier de connexion.


Bon dev