Designed by Derf !
111 en ligne   Boutique | Sites | Bar | Forum | PhpBB | Actu | Glossaire | Codes | Tips | Liens | Livres | Lettre  


 Recherche

 NewsLetter






   

AJAX + ASP ou PHP (3/3)

Listes multiples liées via XMLHTTPRequest






Avant tout - Script ASP - Script PHP



La base de données

Pour commencer, et pour ceux qui auraient des difficultés pour importer le fichier .csv dans leur base de données favorite, vous pouvez la créer avec cette structure :

villes.sql 
#
# Structure de la table `villes`
#

CREATE TABLE villes (
  Commune varchar(30) NOT NULL default '',
  Codepos varchar(5) NOT NULL default '',
  Departement varchar(30) NOT NULL default '',
  INSEE varchar(5) NOT NULL default ''
) TYPE=MyISAM;

et ensuite exécuter ce petit script pour la charger :

import.php 
<?
$table = "villes";
$fichier = "insee.csv";

set_time_limit(90);

include("_conn.php");

$f = file($fichier); $i=0;

mysql_query("DELETE FROM $table");

foreach($f as $ligne) {
   if($i) {
      $ligne = addslashes(trim($ligne));
      $SQL = "INSERT INTO $table VALUES('".str_replace(";","','",$ligne)."')";
      mysql_query($SQL);
   } else $i++;
}

@mysql_close();
?>

Le fichier _conn.php à inclure est le suivant :

_conn.php 
<?
// Connexion à la base MySQL
@mysql_connect("localhost","root","");
@mysql_select_db("test");
?>

A renseigner évidemment en fonction de vos propres paramètres de connexion...


Le script serveur appelé par XMLHTTPRequest

Comme vous le savez maintenant après avoir lu l'article de Robloche, il vous faut un script serveur qui sera appelé depuis JavaScript et vous permettra de mettre à jour vos listes sans recharger la page... Voici celui que je vous propose :

ville.php 
<?
$table = "villes";

include("_conn.php");

switch($q=@$_GET["q"]) {

   case "1": // Liste des codes postaux
      $query  = "SELECT DISTINCT Codepos FROM $table"
         . " WHERE Departement = '".$_POST["champ"]."' ORDER BY 1"; 
      
   case "2": // Liste des communes
      if(!@$query) $query  = "SELECT Commune,INSEE FROM $table"
         . " WHERE Codepos = '".$_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 départements
      $liste_dpt = "";
      $SQL = "SELECT DISTINCT Departement FROM $table ORDER BY 1";
      $res = mysql_query($SQL);
      while($val = mysql_fetch_array($res))
         $liste_dpt .= "<option value=\"".$val[0]."\">".$val[0]."</option>\n";

      // Nom de la commune d'après le code INSEE
      if(@$adresse["INSEE"]) {
         $SQL = "SELECT Commune FROM $table WHERE INSEE='".$adresse["INSEE"]."'";
         $res = mysql_query($SQL);
         $adresse["Commune"] = mysql_result($res,0,0);
      }
}

@mysql_close();
?>

A noter comme différences principales avec le script initial :
  • Un paramètre q est passé en méthode GET pour indiquer la liste concernée (vu qu'il y en a plus que 2) et déterminer en fonction de lui la requete à appliquer ;
  • Si la page est appelée sans ce paramètre q (inclusion classique) il met à jour 2 variables : la liste des départements à afficher dans le formulaire et le libellé de la commune en fonction de son code INSEE ;
  • Le formulaire resélectionnant dans les listes les choix précédemment saisis, une ligne echo 'update('.$q.');'; est ajoutée qui déclenchera le process JavaScript de mise à jour.


Le formulaire enfin

test.php 
<?
// On peut aussi extraire ce tableau d'une DB ;)
$adresse = array(
   "civ"=>@$_POST["civ"],
   "nom"=>@$_POST["nom"],
   "prenom"=>@$_POST["prenom"],
   "adresse"=>@$_POST["adresse"],
   "adresse2"=>@$_POST["adresse2"],
   "Departement"=>@$_POST["list0"],
   "Codepos"=>@$_POST["list1"],
   "INSEE"=>@$_POST["list2"],
);

include("ville.php");

?>
<HTML><HEAD>

   <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", "ville.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] = "<?=@$adresse["Departement"]?>";
         v[1] = "<?=@$adresse["Codepos"]?>";
         v[2] = "<?=@$adresse["INSEE"]?>";
         if(v[L]=="") return;
         f = document.forms.form_selects;
         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);
               break;
            }
      }

      // Validation du formulaire
      function test(f) {
         if(f.nom.value!="")
            if(f.adresse.value!="")
               if(f.elements["list2"].options.length!=0)
                  return true;
         alert("Formulaire incomplet !");
         return false;
      }

   </SCRIPT>


   <STYLE TYPE="text/css">
      td,select,input { font:normal 8pt Verdana }
      .select1 {width:170px}
      .select2 {width:80px}
   </STYLE>


</HEAD><BODY onload="update(0)">

<strong><?=htmlentities(@$adresse["civ"]." ".ucfirst(@$adresse["prenom"])
   ." ".strtoupper(@$adresse["nom"]))?>
</strong><br/>
<?=htmlentities(@$adresse["adresse"])?><br/>
<?if(@$adresse["adresse2"]) echo htmlentities($adresse["adresse2"])."<br/>"?>
<strong><?=$adresse["Codepos"]." ".@$adresse["Commune"]?></strong><br/>
<br/>

<table><tr><td><fieldset>
   <legend>Vos coordonnées&nbsp;</legend>
   <table><form name="form_selects" id="form_selects" method="POST" onsubmit="return test(this)";>
      <tr>
         <td align="right">Civilité&nbsp;:</td>
         <td><select name="civ">
            <?$civ = array("M."=>"Monsieur","Mme"=>"Madame","Mlle"=>"Mademoiselle");
            foreach($civ as $c1=>$c2) { ?>

               <option value="<?=$c1?>"
                  <?if($c1==@$adresse["civ"]) echo "SELECTED"?>
               ><?=$c2?></option>
            <? } ?>
         </select></td>
      </tr><tr>
         <td align="right">Nom&nbsp;<font color=red>*</font></td>
         <td colspan=3><table border=0 cellspacing=0 cellpadding=0><tr>
            <td><input name="nom" size=21
               value="<?=htmlentities(@$adresse["nom"])?>"/></td>
            <td align="right">&nbsp;Prénom&nbsp;:&nbsp;</td>
            <td><input name="prenom" size=21
               value="<?=htmlentities(@$adresse["prenom"])?>"/></td>
         </tr></table></td>
      </tr><tr>
         <td align="right">Adresse&nbsp;<font color=red>*</font></td>
         <td colspan=3><input name="adresse" size=55
            value="<?=htmlentities(@$adresse["adresse"])?>"/></td>
      </tr><tr>
         <td align="right">Complément&nbsp;:</td>
         <td colspan=3><input name="adresse2" size=55
            value="<?=htmlentities(@$adresse["adresse2"])?>"/></td>
      </tr><tr>
         <td align="right">Département&nbsp;:</td>
         <td><select class="select1" name="list0" id="list0" onchange="liste(this.form,1,2)">
            <option value="">== Choisir ==</option>
            <?=$liste_dpt?>
         </select></td>
         <td>Code Postal&nbsp;:</td>
         <td><select class="select2" name="list1" id="list1" onchange="liste(this.form,2,2)">
         </select></td>
      </tr><tr>
         <td align="right">Commune&nbsp;<font color=red>*</font></td>
         <td><select class="select1" name="list2" id="list2">
         </select></td>
      </tr><tr>
         <td colspan=4 align="center"><input type="submit" value="Envoyer"/></td>
      </tr>
   </form></table>
</fieldset></td></tr></table>

</BODY></HTML>


Didier le 27/09/2005 (186 375 hits)
Didier Gratuit !!! Téléchargez la Beta d'Office 2010 !
35% de réduction sur Windows 7 !
Au fil des news  
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 6
Pour continuer dans le même style, je vous propose une suite au précédent article. Rechercher tous ...
Adobe - Adobe Photoshop.com Mobile pour iPhone 1.1
JavaScript - Ajouter une page dans vos favorites
Dreamweaver CS4 + Php + Mysql - Trucs et Astuces - Part 5 -
Je vous propose cette fois deux astuces. Comment exporter une feuille de style avec l'aide de ...
SharePoint Personalization Site Links - Les liens personnalisés des MySite SharePoint
Nous avons vu dans les articles précédents comment agrémenter les pages de recherche afin de ...
Magazines - Le n°126 de Programmez est disponible
Outils - Traducteur en ligne automatique pour site web
Adobe - Adobe Photoshop.com Mobile pour Iphone
Magazines - Le n°125 de Programmez est disponible
Adobe - Adobe AIR 2 et Flash Player 10.1version bêta
Les conférences autour des technologies Microsoft - Liste non exhaustive des grands évènements
Nous allons essayer de regrouper un grand nombre des évènements autour des technologies Microsoft ...
Magazines - Le n°124 de Programmez est disponible
PHP - Forum PHP 2009
Composants - eFace - XAML en Java
WPF - Désactiver le bouton de réduction d'une fenêtre
Magazines - Le n°123 de Programmez est disponible
Magazines - Le n°122 de Programmez est disponible
Auditer une ferme SharePoint - Assurer le bon fonctionnement de SharePoint
Dans le cadre de la bonne gestion de son environnement SharePoint, il est utile de faire un ...
SQL Server 2008 Report Builder 2.0 - Installation et utilisation de Report Builder 2.0
Dans le cadre de la création de rapports pour SQL Server Reporting Services 2008, un outil est ...
Magazines - Le HS N° 1 de Web Design est disponible
Adobe - Adobe propose en Open Source les frameworks.....
Outils - EntityBuilder
CSharp - Sérialisation XML de vos objets
Magazines - Le n°121 de Programmez est disponible
Adobe - Adobe annonce MAX 2009 !
Outils - WhoIs
[MAJ] Dreamweaver MX + Php + MySql - Les formulaires - partie 3
Mise à jour du code, par DB 77, affichage du code erreur, dans la page erreur.php, traduction des ...
PHP - News avec photo - Système de gestion - affichage
Gestion - Administration - Affichage d'une "News", "Actualité", "Info", ... avec : - mise en forme ...
Outils - Crypt
Dreamweaver Php Mysql - Région répétée imbriquée
Je rebondis, sur un post du forum, pour vous montrer comment obtenir grâce à l'extension Simulated ...
Magazines - Le n° 120 de Programmez est disponible
Gérer les bases de contenu SharePoint - Gérer la croissance du volume des données
Dans le cadre de la gestion quotidienne de ferme SharePoint, il existe une partie qu'il faut ...
PHP - Le Coach PHP sur Visual Studio
.NET - Ecrire une application .NET utilisant MySQL
PHP - Utilisation de PHP dans le monde Microsoft
Magazines - Le n° 119 de Programmez est disponible
Adobe - Adobe annonce Photoshop Marketplace
[MAJ] Tutoriel AJAX simple - En avant vers le WEB2.0
Mis à jour le 20/04/2009
Captcha «maison» sans extension - Et en plus, c'est gratuit ;)
Un ami m'a demandé de l'aide ce matin pour insérer un captcha dans un formulaire pour son site ...
Dreamweaver CS4 - Photoshop CS4 - Alliance parfaite pour la gestion des images
Pour changer un peu des pages de code, je vous propose de voir ensemble, la fonctionnalité très ...
Tutorial : HTML | Scripting | ASP-PHP | ASP.net | SQL Server | XML
Sharepoint | XAML | Pocket | Dreamweaver | VML | Divers
  Scripts : Scripting | ASP-PHP | ASP.net | Divers
  Boutique | Annuaire | Bannières | Météo | Tribune | Partenariats
v3b © Didier 2003   
 

Corpo Sciences de Reims Partitions gratuites Carte, météo, annonces
 Groupes Utilisateurs Microsoft ASP-magazine MVP DotNet Project TechNet