[AJAX] Listes déroulantes liées php+ajax

**Sh4dow49** · 11/07/2008, 10h46

Bonjour,

Voila j'aimerai lier deux listes déroulantes dans un formulaire, dont les valeurs sont stockées en base de données (une table par liste)

J'ai essayé plusieurs trucs mais aucun ne marche.

Je me suis principalement appuyé d'un cours AJAX de developpez.net donc voici le lien :
cours

Il faur regarder la partie "IV. Aller plus loin" et plus précisément "IV-A. Listes liées"

Je n'ai pas le mêmes tables mais j'ai adapté le code qui est exactement le même ormis que les id et les tables ne sont pas les mêmes (mais je ne pense pas que ca vienne de la)

Pour le cas ou ca peut provenir de ca : j'utilise non pas une base de données mysql comme dans le cours mais une base de données oracle couplée au framework Zend

Est ce que ca peut être le fichier de conf apache qui n'est du coup pas configuré correctement pour l'ajax ?

Voila si quelqu'un a fait des listes liées via AJAX ou Javascript tout court s'il pouvait m'aider car je ne trouve rien qui fonctionne

**Carabi** · 11/07/2008, 11h32

Bonjour

Heu...comment ça ça marche pas ! Ca devrait pourtant !

Non, sérieusement, pourrais-tu être un peu plus précis sur ton erreur? Ou donner un peu de code ? Parce que là...

Merci et bon courage !

**Sh4dow49** · 11/07/2008, 12h09

Le code est exactement le même, je l'ai intégré lettre par lettre dans ma page.

j'ai juste changé les noms des id en faisant bien attention de les faire correspondre dans le script ajax.
J'ai également changé le mode de connexion a la base de données et l'execution de la requête (du fait que j'utilise une bdd oracle et pas mysql)

Ce qui se passe :
au depart :
liste 1 contien bien les données voulues
liste 2 ne contient qu'une option value="" et le texte est "choisissez un type"

je choisis un type :
liste 1 : aucun changement si ce n'est qu'un type a été choisi
liste 2 : l'option vide disparait pour laisser la place a une liste qui lorsqu'on la déroule fai comme si il n'y avait qu'une liste d'options sans texte non sélectionnables (je sais pas si c'est compréhensible ... )

**Carabi** · 11/07/2008, 14h14

liste 2 : l'option vide disparait pour laisser la place a une liste qui lorsqu'on la déroule fai comme si il n'y avait qu'une liste d'options sans texte non sélectionnables (je sais pas si c'est compréhensible ... )

Tu peux envoyer le code source qui fait apparaître ça s'il te plait? Merci

**Sh4dow49** · 11/07/2008, 15h06

ouep voici tout d'abord le code de la page contenant les deux formulaires

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
 
<!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>
                <title>Thales Portal</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <script type='text/javascript'>
 
                        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éar le navigateur
                                   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                                   xhr = false;
                                }
                                return xhr;
                        }
 
                        /**
                        * Méode qui sera appelésur le click du bouton
                        */
                        function go(){
                                var xhr = getXhr();
                                // On déni ce qu'on va faire quand on aura la rénse
                                xhr.onreadystatechange = function(){
                                        // On ne fait quelque chose que si on a tout reç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('projet').innerHTML = leselect;
                                        }
                                }
 
                                // Ici on va voir comment faire du post
                                xhr.open("POST","listeProjets.php",true);
                                // ne pas oublier çpour le post
                                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                // ne pas oublier de poster les arguments
                                // ici, l'id de l'auteur
                                sel = document.getElementById('typeApp');
                                typeApplication = sel.options[sel.selectedIndex].value;
                                xhr.send("typeApplication="+typeApplication);
                        }
                </script>
        </head>
 
        <body>
                <?php
				//si on a bien un objet passe en parametres
                        if (isset($_GET['obj']) && $_GET['obj'] != null)
                        {
                                $obj = htmlentities($_GET['obj']);
 
                                //si l'objet est une application ...
                                if ($obj == 'application')
                                {
                                        //si on a un parametre projet on le recupere
                                        if (isset($_GET['typeApp']) && $_GET['typeApp'] != null)
                                        {
                                                $typeApp = htmlentities($_GET['typeApp']);
                                                $manqueTypeApp = false;
                                                $presenceTypeApp = true;
                                        }
                                        //sinon si on a un parametre projet mais qu'il est vide on precise qu'il manque ce parametre
                                        else if (isset($_GET['typeApp']) && $_GET['typeApp'] == null)
                                        {
                                                $manqueTypeApp = true;
                                                $presenceTypeApp = true;
                                        }
                                        //sinon si on n'a pas de parametre typeApp on indique qu'il n'est pas present
                                        else
                                        {
                                                $presenceTypeApp = false;
                                        }
 
                                        //si on a un parametre projet on le recupere
                                        if (isset($_GET['projet']) && $_GET['projet'] != null)
                                        {
                                                $projet = htmlentities($_GET['projet']);
                                                $manqueProjet = false;
                                                $presenceProjet = true;
                                        }
                                        //sinon si on a un parametre projet mais qu'il est vide on precise qu'il manque ce parametre
                                        else if (isset($_GET['projet']) && $_GET['projet'] == null)
                                        {
                                                $manqueProjet = true;
                                                $presenceProjet = true;
                                        }
                                        //sinon si on n'a pas de parametre projet on indique qu'il n'est pas present
                                        else
                                        {
                                                $presenceProjet = false;
                                        }
 
                                        /*
                                        autres paramètres enlevés pour réduire, inutilisés dans les listes
                                        */
 
                                        //on ouvre une connexion a la base de donnees
                                        include ("../../scripts/connexion.php");
 
                                        //on affiche le formulaire pour la creation
                                        echo '<h3>Veuillez remplir le formulaire : </h3>';
                                        echo '<form method="post" action="creer.php?obj=Application" >';
                                                echo '<table>';
                                                        echo '<tr>';
                                                                echo '<td>';
                                                                        echo 'Type d\'application : ';
                                                                echo '</td>';
                                                                echo '<td>';
                                                                        //on affiche le resultat dans une liste deroulante
                                                                        echo '<select name="typeApp" id="typeApp" onchange="go()" >';
 
                                                                        //si il ne manque pas le parametre typeApp ...
                                                                        if ($presenceTypeApp && !$manqueTypeApp)
                                                                        {
                                                                                echo '<option value="'.$typeApp.'">'.$typeApp.'</option>';
                                                                        }
                                                                        //sinon on affiche tous les types existants
                                                                        /*
                                                                        c'est le cas qui m'intéresse car il contient tous les types
                                                                        */
                                                                        else
                                                                        {
                                                                                echo '<option value="">blank</option>';
                                                                                $requeteSQL = 'SELECT TypeAppName FROM TypeAppli ORDER BY position';
                                                                                echo $requeteSQL;
                                                                                include ("../../scripts/requete.php");
                                                                                while ($row = oci_fetch_array($stmt, OCI_BOTH))
                                                                                {
                                                                                        echo '<option value="'.$row[0].'">'.$row[0].'</option>';
                                                                                }
                                                                        }
 
                                                                        //on ferme la liste deroulante
                                                                        echo '</select>';
 
                                                                        //si aucune option n'est selectionnee on affiche un rappel
                                                                        if ($manqueTypeApp)
                                                                        {
                                                                                echo '<font color=#FF0000>&nbsp;Veuillez s&eacute;lectionner un type d\'application ! </font>';
                                                                        }
                                                                echo '</td>';
                                                        echo '</tr>';
 
                                                        /*
                                                        c'est la liste a modifier
                                                        */
                                                        echo '<tr>';
                                                                echo '<td>';
                                                                        echo 'Projet : ';
                                                                echo '</td>';
                                                                echo '<td>';
                                                                        echo '<div id="projet" style="display:inline">';
                                                                                echo '<select name="projet">';
                                                                                        echo '<option value="">choisir un type</option>';
                                                                                echo '</select>';
                                                                        echo '</div>';
 
                                                                        //si aucune option n'est pas selectionnee on affiche un rappel
                                                                        if ($manqueProjet)
                                                                        {
                                                                                echo '<font color=#FF0000>&nbsp;Veuillez s&eacute;lectionner un projet ! </font>';
                                                                        }
                                                                echo '</td>';
                                                        echo '</tr>';
 
 
                                                echo '</table>';
                                                echo '<p>';
                                                        echo '<input type="submit" value="Cr&eacute;er" />';
                                                        echo '<input type="reset" value="Recommencer" />';
                                                        echo '<input type="button" value="Annuler" onClick="document.location.href=\'applications.php?projet='.$projet.'&type='.$typeApp.'\'" />';
                                                echo '</p>';
                                        echo '</form>';
 
                                        //on se deconnecte de la base de donnees
                                        include ("../../scripts/deconnexion.php");
                                }
                                //sinon on renvoie vers l'index
                                else
                                {
                                        header ('location: index.php');
                                }
                        }
                        //sinon on renvoie a l'index
                        else
                        {
                                header ('location: index.php');
                        }
                ?>
        </body>
</html>

et voici le fichier listeProjets.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
        echo '<select name="projet">';
        if(isset($_POST['typeApplication'])){
                include ("../../scripts/connexion.php");
                $reuqeteSQL = 'SELECT ProjName FROM Projet WHERE TypeAppName=\''.$_POST['typeApplication'].'\' ORDER BY position';
                include ("../../scripts/requete.php");
                while($row = oci_fetch_array($stmt, OCI_BOTH)){
                        echo '<option value="'.$row[0].'">'.$row[0].'</option>';
                }
                include ("../../scripts/deconnexion.php");
        }
        echo '</select>';
?>

Le 1er fichier est pas mal long désolé, j'ai mi des commentaires /* */ pour situer les endroits les plus importants dans le code (pr repérer les listes)

Perso je ne vois pas d'erreur, peut être qu'un oeil externe la verra ...

**Carabi** · 11/07/2008, 15h14

Deuxième fichier => $reuqeteSQL = ... ????

Ca me titille ce mot "reuqete", je sais pas pourquoi...

Ca vient peut-être pas de là remarque...j'y connais rien en PHP

**Sh4dow49** · 11/07/2008, 15h19

en effet c'était ca ... la variable est $requeteSQL et non $reuqeteSQL

Erreur stupide hein mais c'est le genre d'erreur qu'on ne voit plus au bout de 24h passées sur le meme code ...

Merci beaucoup !