Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1467 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  2 listes déroulantes liés javascript+phpmysql+ajax

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

2 listes déroulantes liés javascript+phpmysql+ajax

n°1873524
roy mustan​g
Posté le 15-04-2009 à 20:38:37  profilanswer
 

Bonjour,
je voudrais concevoir 2 listes déroulantes liés dont le contenu est des données php mysql la première contient le nom de matière première l'attribut des_mat_pre issu de cette table
 

Code :
  1. Code :
  2.    1. #
  3.    2. # Structure de la table `matiere_premiere`
  4.    3. #
  5.    4.
  6.    5. CREATE TABLE matiere_premiere (
  7.    6.   code_mat_pre int(20) NOT NULL auto_increment,
  8.    7.   des_mat_pre varchar(20) NOT NULL default '',
  9.    8.   code_four varchar(20) NOT NULL default '',
  10.    9.   PRIMARY KEY  (code_mat_pre,code_four)
  11.   10. ) TYPE=MyISAM;


 
 
 
et la deuxième liste qui va selon la jointure de la clé(code_mat_pre) afficher les type de matière première l'attribut des_typ_mat_pre
 

Code :
  1. Code :
  2.    1. #
  3.    2. # Structure de la table `type_matiere_premiere`
  4.    3. #
  5.    4.
  6.    5. CREATE TABLE type_matiere_premiere (
  7.    6.   code_typ_mat_pre int(20) NOT NULL auto_increment,
  8.    7.   des_typ_mat_pre varchar(20) NOT NULL default '',
  9.    8.   code_mat_pre varchar(20) NOT NULL default '',
  10.    9.   couleur varchar(20) NOT NULL default '',
  11.   10.   PRIMARY KEY  (code_typ_mat_pre,code_mat_pre)
  12.   11. ) TYPE=MyISAM;


 
 
donc en effet vu qu'on peut pas appeler par un événement javascript du contenu phpmysql j'ai du me concentrer sur l'ajax pour trouver un script qui le permet et voici le lien ou j'ai trouvé un
http://siddh.developpez.com/articles/ajax/#LIV-A
j'ai essayé de l'appliquer le mieux que possible mais c'est seulement le contenu de ma première liste qui s'est affiché
voici mon code pour la première page
 

Code :
  1. Code :
  2.    1. <html>
  3.    2. <head>
  4.    3.  <title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
  5.    4.  <script type='text/javascript'>
  6.    5.
  7.    6.   function getXhr(){
  8.    7.                                 var xhr = null;
  9.    8.    if(window.XMLHttpRequest) // Firefox et autres
  10.    9.       xhr = new XMLHttpRequest();
  11.   10.    else if(window.ActiveXObject){ // Internet Explorer   
  12.   11.       try {
  13.   12.                   xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  14.   13.               } catch (e) {
  15.   14.                   xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  16.   15.               }
  17.   16.    }
  18.   17.    else { // XMLHttpRequest non supporté par le navigateur   
  19.   18.       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  20.   19.       xhr = false;
  21.   20.    }
  22.   21.                                 return xhr;
  23.   22.   }
  24.   23.
  25.   24.   /**
  26.   25.   * Méthode qui sera appelée sur le click du bouton
  27.   26.   */
  28.   27.   function go(){
  29.   28.    var xhr = getXhr();
  30.   29.    // On défini ce qu'on va faire quand on aura la réponse
  31.   30.    xhr.onreadystatechange = function(){
  32.   31.     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  33.   32.     if(xhr.readyState == 4 && xhr.status == 200){
  34.   33.      leselect = xhr.responseText;
  35.   34.      // On se sert de innerHTML pour rajouter les options a la liste
  36.   35.      document.getElementById('typ_mat_pre').innerHTML = leselect;
  37.   36.     }
  38.   37.    }
  39.   38.
  40.   39.    // Ici on va voir comment faire du post
  41.   40.    xhr.open("POST","ajaxtypematierepremiere.php",true);
  42.   41.    // ne pas oublier ça pour le post
  43.   42.    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  44.   43.    // ne pas oublier de poster les arguments
  45.   44.    // ici, l'id de l'auteur
  46.   45.    sel = document.getElementById('mat_pre');
  47.   46.    code_mat_pre = sel.options[sel.selectedIndex].value;
  48.   47.    xhr.send("code_mat_pre="+code_mat_pre);
  49.   48.   }
  50.   49.  </script>
  51.   50. </head>
  52.   51. <body>
  53.   52.  <form action="liste déroulante.php" method="post">
  54.   53.   <fieldset style="width: 500px">
  55.   54.    <legend>Liste liées</legend>
  56.   55.    <label>matiere premiere</label>
  57.   56.    <select name='mat_pre' id='mat_pre' onchange='go()'>
  58.   57.     <option value='-1'>Aucun</option>
  59.   58.     <?
  60.   59.      mysql_connect("localhost","root","" );
  61.   60.      mysql_select_db("art-mania" );
  62.   61.      $res = mysql_query("SELECT distinct des_mat_pre FROM matiere_premiere ORDER BY des_mat_pre" );
  63.   62.      while($row = mysql_fetch_assoc($res)){
  64.   63.       echo "<option name='des_mat_pre' value='".$row["des_mat_pre"]."'>".$row["des_mat_pre"]."</option>";
  65.   64.      }
  66.   65.     ?>
  67.   66.    </select>
  68.   67.    <label>type matière première</label>
  69.   68.    <div id='des_typ_mat_pre' style='display:inline'>
  70.   69.    <select name='typ_mat_pre'>
  71.   70.     <option value='-1'>Choisir une matière première</option>
  72.   71.    </select>
  73.   72.    </div>
  74.   73.   </fieldset>
  75.   74.  </form>
  76.   75. </body>
  77.   76. </html>


 
 
 
 
et ma deuxième page ajaxtypematierepremiere.php
 
 
 
   

Code :
  1. 1. <?php
  2.    2. echo "<select name='typ_mat_pre'>";
  3.    3. if(isset($_POST["code_mat_pre"])){
  4.    4.  mysql_connect("localhost","root","" );
  5.    5.      mysql_select_db("art-mania" );
  6.    6.  $res = mysql_query("SELECT * FROM type_matiere_premiere,matiere_premiere
  7.    7.   WHERE type_matiere_premiere.code_mat_pre=".$_POST["code_mat_pre"]." ORDER BY des_typ_mat_pre" );
  8.    8.   while($row = mysql_fetch_assoc($res)){
  9.    9.
  10.   10.   echo "<option value='".$row["des_typ_mat_pre"]."'>".$row["des_typ_mat_pre"]."</option>";
  11.   11.  }
  12.   12. }
  13.   13. echo "</select>";
  14.   14. ?>


 
 
 
donc voila c'est complexe et je conjure votre aide merci :((((((((((((((((

mood
Publicité
Posté le 15-04-2009 à 20:38:37  profilanswer
 

n°1873591
David Bori​ng
Posté le 16-04-2009 à 00:33:48  profilanswer
 

Je 'ai rien compris à ton code, mais pour info, sans doctype, tu es en quirks mode
http://www.quirksmode.org/css/quirksmode.html


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  2 listes déroulantes liés javascript+phpmysql+ajax

 

Sujets relatifs
Le meilleur framework Ajax ?2 listes déroulantes liés javascript+phpmysql+ajax
[Resolu]Firefox Fonction Javascript replace fonctionne pas[Résolu] Ajax, XMLhttpRequest, interrogation multiples et simultannées
Variable PHP en Javascript 
Plus de sujets relatifs à : 2 listes déroulantes liés javascript+phpmysql+ajax


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR