[AJAX] avec 3 listes déroulantes liées php+xhtml+css+javascript+ajax

Invité · 27/12/2008, 04h27

bonjour,

J'ai une page avec 3 liste déroulantes en xhtml, grâce à javascript et ajax j'arrive à générer du php et afficher une deuxieme liste en fonction de la premiere.

Mon probleme est que je n'arrive pas à afficher une troisieme liste en fonction de la deuxieme, quelle est la piste à suivre svp ?

je me suis appuyé sur ce tuto, j'ai exactement fait la meme chose en adaptant :

http://siddh.developpez.com/articles/ajax/

merci d'avances pour vos réponses, c'est urgent, c'est pour mes projets de développement de fin d'année scolaire.

N.B : le tuto en question montre comment gérer deux listes déroulantes, l'une en fonction de l'autre, mais pas 3, j'ai essayé de suivre le meme cheminement pour afficher une troisieme liste déroulante en fonction de la deuxieme mais ça ne fonctionne pas.

je vous colle le code des mes pages :

*****************************************************************
louer_un_vehicule.php
******************************************************************

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<?php  
session_start();
if( !isset($_SESSION['login']) || !isset($_SESSION['password']) ){
    header('Location: <a href="http://localhost/sitelocavehicules" target="_blank">http://localhost/sitelocavehicules</a> [...] pte.php');
}  
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type='text/javascript' src='ajax.js'></script>
    <noscript> <meta http-equiv="Refresh" content="0; URL=http://www.google.fr/support/bin/answer.py?answer=23852"> </noscript>
       <link rel="stylesheet" media="screen" type="text/css" href="../design.css" />
    <title>Loca'Vehicules site de location de voitures - Louer un Vehicule</title>
   </head>
 
   <body onload='cacheLoad()'>
 
        <?php
        require("../connexion.php" );
        require("../IMG/banniere.php" );
        require("../IMG/menu.php" );
        ?>
 
        <!-- corps -->
        <div id="corps">
 
 
 
 
            <h4>Veuillez sélectionner un véhicule dans la liste déroulante, ci-dessous : </h4>
 
        <select name="listeModele" id="listeModele" onchange='go()'>
      <option value="-1" selected="selected">Choisissez un modele</option>
      <?php  
          $requete1 = 'select * from MODELE_VEHICULE';
       $res1 = mysql_query($requete1);
      while($tab1 = mysql_fetch_array($res1)){
       echo '<option value=\''.$tab1['NUM_MODELE'].'\'>Modele : '.$tab1['NUM_MODELE'].' | '.$tab1['DESCRIPTION_MODELE'].'</option>';
      }
     ?>
     </select>    
 
    <div id='formuleDiv'>  
    <h4>Veuillez sélectionner une des deux formules dans la liste déroulante, ci-dessous : </h4>
 
     <div id='listeFormule'>
       <select name='listeFormule' onchange='go2()'>
       <option value='-1' selected="selected">Choisissez une formule</option>
       </select>
     </div>
    </div>
 
 
 
    <div id='dateHeureLocDiv'>  
     <p>salut</p>
       </div>
 
 
 
 
 
 
 
            <?php //require("../IMG/footer.php" ); ?>
 
            <?php require("../IMG/footer.php" ); ?>
        </div>
        <!-- fin corps -->
 
       <script type="text/javascript">
 
                document.getElementById("footer" ).style.top = "600px";
    document.getElementById("footer" ).style.left = "0px";
 
            </script>
 
<?php require("../bouton_se_deconnecter.php" ); ?>
   </body>
</html>

*********************************************************
ajax.js
********************************************************

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function getXhr(){
            var xhr = null;  
    if(window.XMLHttpRequest) // Firefox et autres
       xhr = new XMLHttpRequest();  
    else if(window.ActiveXObject){ // Internet Explorer  
       try {
                   xhr = new ActiveXObject("Msxml2.XMLHTTP" );
               } catch (e) {
                   xhr = new ActiveXObject("Microsoft.XMLHTTP" );
               }
    }
    else { // XMLHttpRequest non supporté par le navigateur  
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );  
       xhr = false;  
    }  
                return xhr;
 }//fin function getXhr()
 
 
 function go(){
 
    var select = document.getElementById("listeModele" );
             var valeur = select.options[select.selectedIndex].value;
 
 
   if(valeur == -1){
   document.getElementById('formuleDiv').style.visibility='hidden';
   }else{
   document.getElementById('formuleDiv').style.visibility='visible';
   }
 
    var xhr = getXhr();
    // On défini ce qu'on va faire quand on aura la réponse
    xhr.onreadystatechange = function(){
     // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
     if(xhr.readyState == 4 && xhr.status == 200){
      leselect = xhr.responseText;
      // On se sert de innerHTML pour rajouter les options a la liste
      document.getElementById('listeFormule').innerHTML = leselect;
     }
    }
 
    // Ici on va voir comment faire du post
    xhr.open("POST","ajaxModele.php",true);
    // ne pas oublier ça pour le post
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // ne pas oublier de poster les arguments
    // ici, l'id du modele
 
    //alert(valeur);
 
    xhr.send("numModele="+valeur);
 
 }//fin function go()
 
 
 /*function go2(){
   var select2 = document.getElementById("listeFormule" );
            var valeur2 = select2.options[select2.selectedIndex].value;
   
   alert(valeur2);
     
   if(valeur2 == -1){
   document.getElementById('dateHeureLocDiv').style.visibility='hidden';
   }else{
   document.getElementById('dateHeureLocDiv').style.visibility='visible';
   }
 
 }//fin function go2()
 */
 
 function cacheLoad(){
 
   document.getElementById('formuleDiv').style.visibility='hidden';
   //document.getElementById('dateHeureLocDiv').style.visibility='hidden';
 
 }//fin function cacheLoad()

**************************************************************************
ajaxModele.php

*****************************************************************************

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 echo '<select name=\'listeFormule\'>
 <option value=\'-1\' selected=\'selected\'>Choisissez une formule</option>';
 
 if(isset($_POST["numModele"])){
 
  require("../connexion.php" );
 
  $requete2 = 'select NUM_FORMULE, PRIX_LOC
  FROM formule
  where NUM_MODELE = '.$_POST['numModele'];
 
 
   $res2 = mysql_query($requete2);
 
  while($tab2 = mysql_fetch_array($res2)){
 
   echo '<option value=\''.$tab2['NUM_FORMULE'].'\'>Formule '.$tab2['NUM_FORMULE'].' : '.$tab2['PRIX_LOC'].' &euro; '; if($tab2['NUM_FORMULE'] == 1){echo "l'heure";}else{echo "la journ&eacute;e";} echo '</option>';
  }
 }
 echo '</select>';
?>

[AJAX] avec 3 listes déroulantes liées php+xhtml+css+javascript+ajax

JavaScript

Mode arborescent

Discussions similaires

Partager

Partager