[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>';
?>

**islyoung2** · 27/12/2008, 08h58

Bein Où tu peut utiliser la solution longue et banale, c'est à dire tu crée une deuxième fonction javascript ( go2() par ex) et tu fais la même chose que le premier select en créant un deuxième fichier php (ajaxModele2.php), où tu peut optimiser tes fichiers qui existe déja en ajoutant des paramètres (à la fonction go()). voila bonne chance.
et si tu arrive pas n'hésite pas à demander.
Heuuh autres chose tache d'utiliser les balise [CODE] pour ecrire tes codes sources

**Bovino** · 27/12/2008, 10h06

Sujet maintes fois traité... et résolu !

Invité · 27/12/2008, 14h11

bah en faite je comprends ce que tu veux dire, j'ai essayé mais ça ne fonctionne pas et je vois pas comment faire ?

je créé une deuxième fonction javascript go2() et je fais la même chose que le premier select en créant un deuxième fichier php ajaxModele2.php. Mais le onchange='go2()' je le mets dans quel select (je pense dans le deuxième select, car c'est en fonction de lui que s'affiche le troisième select)?

Le problème est que comme tu le vois, le contenu du deuxième select :

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

Code :

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

1
2
3
4
 
<div id='listeFormule'>
contenu
</div>

est généré via du javascript et de l'ajax, qui génére du php entre les deux div ci-dessus, grâce à cette ligne de code de mon fichier .js:

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

Code :

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

1
2
3
4
5
6
7
8
9
10
 
                    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;
 
                    }

Donc pour en revenir à mon problème je pense que le onchange='go2()'
je dois le mettre dans le select du fichier :

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

Le problème est que ça ne fonctionne pas, peux-être je m'y prends mal. Peux-être à cause du innerHtml, je sais pas donc si lyoung ou quelqu'un pouvait me dire comment faire les deux ou trois lignes de codes pour me lancer (après je ferai le reste, mais la si vous voulez je peux pas continuer mon projet et ça m'handicappe)?

Pour la coloriation de code j'y penserai la prochaine fois t'inquiète pas.

Merci d'avance pour vos réponses.

**islyoung2** · 27/12/2008, 14h34

Je ne vois pas où es que tu bug exactement, tu fais la même chose que le premier select, et l'appel de la deuxième fonction go2() tu le fais dans le onchange du deuxième select lors de la création elle même de ce select qui se fais à travers de ton fichier php. voila j'espère que t'a compris sinon n'hésite pas à demander

PS: en faite mon pseudo c'est islyoung2 et pas lyoung tache de t'en souvenir

.

Invité · 27/12/2008, 14h42

Ok ben je vais tester de suite ce que tu m'as conseillé de faire et jte tiens au courant si j'y arrive pas, dans la foulée d'ici 25 minutes même pas.

dsl pour le pseudo déformé.

**Bovino** · 27/12/2008, 14h55

Le problème vient du fait que les options générées avec innerHTML sont mal pris en compte. Il est préférable de passer par les méthodes du DOM (createElement, voire new Option) pour peupler la 2e liste.

**islyoung2** · 27/12/2008, 15h12

Envoyé par Bovino

Le problème vient du fait que les options générées avec innerHTML sont mal pris en compte.

Heuuuh je ne pense pas que sa pose problème car le select est généré et envoyer sous forme de texte et récupéré par responseText.
mais bof peut être que je me trompe

Invité · 27/12/2008, 15h46

En faite je crois avoir trouvé l'erreur, mais pour la corriger il me faudrait votre aide :

je cherche à récupérer le premier select qui se trouve dans cette balise div :

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
 
					<div id='listeFormule'>
<?php
        echo '<select name=\'listeFormule\' onchange=\'go2()\'>
        <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>';
?>
					</div>

la balise div à un id mais pas la balise select, je voudrais savoir si en javascript c'est possible de récupérer l'element select, sans donner d'id au select ?

Si quelqu'un sait merci de me donner la syntaxe en javascript.

merci pour vos réponses

**Bovino** · 27/12/2008, 15h48

Code :

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

document.getElementById('listeFormule').getElementsByTagName('select')[0]

Invité · 27/12/2008, 15h54

nickel merci les mecs, ça fonctionne bovino la ligne de code que tu m'as filé, merci.

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

JavaScript

Discussions similaires

Partager

Partager