Selects en cascade avec bdd Mysql

Selects en cascade avec bdd Mysql - HTML/CSS - Programmation

Marsh Posté le 29-11-2010 à 17:26:48    

Hello,
 
Je sais, je vais avoir des remarques du genre : sujet ultra traité, mais je viens de passer une demi journée à chercher sur le web et faire des tests, et j'en arrive à demander un peu d'aide.
 
Voila, j'utilise le principe décrit ici (http://siddh.developpez.com/articles/ajax/#LIV-A) pour créer un select via un autre, en passant par un fichier php pour la partie bdd, et XMLHttpRequest pour la partie javascript.  
 
 

Code :
  1. // Requette AJAX
  2. function makeRequest(url,id_niveau,id_ecrire){
  3. var http_request = false;
  4.  //créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
  5.         if (window.XMLHttpRequest) { // Mozilla, Safari,...
  6.             http_request = new XMLHttpRequest();
  7.             if (http_request.overrideMimeType) {
  8.                 http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
  9.             }
  10.         } else if (window.ActiveXObject) { // IE
  11.             try {
  12.                 http_request = new ActiveXObject("Msxml2.XMLHTTP" );
  13.             } catch (e) {
  14.                 try {
  15.                     http_request = new ActiveXObject("Microsoft.XMLHTTP" );
  16.                 } catch (e) {}
  17.             }
  18.         }
  20.         if (!http_request) {
  21.             alert('Abandon :( Impossible de créer une instance XMLHTTP');
  22.             return false;
  23.         }
  24.         http_request.onreadystatechange = function() { traitementReponse(http_request,id_ecrire); } //affectation fonction appelée qd on recevra la reponse
  25.  // lancement de la requete
  26.  http_request.open('POST', url, true);
  27.  //changer le type MIME de la requête pour envoyer des données avec la méthode POST ,  !!!! cette ligne doit etre absolument apres http_request.open('POST'....
  28.  http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  29.  obj=document.getElementById(id_niveau);
  31.  data="val_sel="+obj.value;
  33.         http_request.send(data);
  34. }
  37. function traitementReponse(http_request,id_ecrire) {
  38. var affich="";
  39. if (http_request.readyState == 4) {
  40.  if (http_request.status == 200) {
  41.     // cas avec reponse de PHP en mode texte:
  42.   //chargement des elements reçus dans la liste
  43.   var affich_list=http_request.responseText;
  44.    obj = document.getElementById(id_ecrire);
  45.                 obj.innerHTML = affich_list;
  50.  }
  51.  else {
  52.                 alert('Un probleme est survenu avec la requete.');
  53.         }
  54.     }
  55. }


 
Code PHP qui génére la liste N°2:
 

Code :
  1. $query = sprintf("SELECT id, cp, ville FROM villes WHERE cp='%d' ORDER BY ville ASC",
  3. mysql_real_escape_string($_POST[val_sel]));
  5. $result_recherche=mysql_query($query) or die (mysql_error());
  6. $num_rows = mysql_num_rows($result_recherche);
  8. // construction de la liste deroulante
  9. $aff=="";
  10. $aff .= "   Ville :
  11.  <select name='id_ville' id='id_ville' onChange=\"makeRequest2('RepVilles.php','id_ville','id_ville_multi')\" class=\"required\" >";
  12.  if ($num_rows == 0)
  13.   $aff .= "<option value=\"\">-- Code postal introuvable, veuillez modifier --</option>";
  14.  else
  15.   $aff .= "<option value=\"\">-- Choisissez --</option>";
  18.  while ($row=mysql_fetch_assoc($result_recherche)){
  19.   $aff.='<option value="'.$row["id"].'">'.$row["ville"].'</option>';
  20.  }
  21. $aff .= "</select><br><br>";
  22. // envoi reponse Php a Ajax  
  23. echo $aff;


 
 
Ca fonctionne très bien lorsqu'on a un 1er niveau, mais moi je voudrai en créer un 2e, à partir du select généré juste avant :
 
-> Select 1 fixe -> select 2 généré en js -> select 3 généré en js
 
Le problème, c'est que pour le select 3, la valeur du post est vide.  "obj=document.getElementById(id_niveau);" ne semble renvoyer aucune valeur à partir du select N°2
 
Merci pour votre aide, j'en ai vraiment besoin !

Reply

Marsh Posté le 29-11-2010 à 17:26:48   

Reply

Marsh Posté le 03-12-2010 à 10:18:44    

Hello,
 
Tu devrais te pencher sur la librairie jQuery afin de ne pas t'embêter à réécrire des fonctionnalités compliquées. Une requête ajax, c'est aussi simple à écrire que ca :
http://api.jquery.com/jQuery.post/
 
Et ensuite, tu as des plugins de jQuery qui répondent facilement à ton problème :
http://plugins.jquery.com/project/cascade


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed