IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité
    Invité(e)
    Par défaut [AJAX] avec 3 listes déroulantes liées php+xhtml+css+javascript+ajax
    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>';
    ?>
    Dernière modification par Bovino ; 27/12/2008 à 10h49. Motif: Merci d'utiliser les balises [CODE] de l'éditeur (bouton '#')

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Liste déroulante liée (PHP-AJAX)
    Par emangeot dans le forum Langage
    Réponses: 1
    Dernier message: 01/12/2014, 15h41
  2. [AJAX] 3 listes déroulantes liées PHP/MYSQL/AJAX
    Par zied.ellouze dans le forum AJAX
    Réponses: 2
    Dernier message: 06/09/2011, 12h58
  3. [AJAX] Listes déroulantes liées php+ajax
    Par Sh4dow49 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 11/07/2008, 15h31
  4. Pb avec 3 listes déroulantes liées
    Par barthez dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 06/06/2006, 23h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo