aide sur le code source de liste déroulante dynamique

**owenho** · 26/01/2013, 12h22

Bonjour à tous ,

j'ai un soucis à filtrer les données de la table ,
j'ai utilisé ajax pour le transfert de données entre fichier php.
j'ai quatre liste déroulante, chacun contient les données d'une colonne , et au démarrage de la page , tous les données s'affiche , comme suit :

Nom : listederoulante.png
Affichages : 313
Taille : 17,9 Ko

Nom : listederoulante.png
Affichages : 313
Taille : 17,9 Ko

j'ai deux fichiers php :

select.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
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
<head>
 
<script type="application/javascript" charset="utf-8" src="jquery-1.6.3.min.js"></script> 
 
<script type="application/javascript"> 
      function filterLists() { 
         // ici on récupère les valeurs sélectionnées pour chaque liste avec les sélecteurs de jQuery 
         var nom    = $('#nom option:selected').val(); 
         var prenom    = $('#prenom option:selected').val(); 
         var sexe    = $('#sexe option:selected').val(); 
         var ville    = $('#ville option:selected').val(); 
         // on fait notre appel ajax paramétré (pas besoin de s'occuper de l'implémentation du XMLHttpRequest, jQuery le fait pour toi) 
         $.ajax({ 
            type: 'POST',   // méthode de transmission des données 
            url: 'selectListe.php',   // script à exécuter sur le serveur 
            data: 'nom='+nom+'&prenom='+prenom+'&sexe='+sexe+'&ville='+ville,   // données à passer au script via le tableau $_POST 
            dataType: 'xml',   // type des données attendues en retour : ici xml 
            cache: false, 
            success: function(response) {   // traitement du résultat (= données reçues du serveur) une fois l'appel ajax réussi 
               var code; 
               // vu que la réponse est au format xml, on demande à jquery de trouver des noeuds spécifiques 
               // et si ces noeuds contiennent des données alors on remplace les données des listes liées par celles renvoyées par le serveur 
               // en clair : on remplace si nécessaire l'ensemble des lignes <option value=""></option> pour chaque liste qui n'a pas encore de sélection 
               if ((code = $(response).find('nom').text()).length)    $('#nom').html(code); 
            } 
         }); 
      } 
   </script>
 <style type="text/css">
      td {
        border : 1px dashed #4c4;
		align : center;
		width : 120px;
        }
	th {
		align : center;
		width: 120px;
        }	
    </style>
  </head>
  <body>
 
 
<form id='frmRecherche'>
 
<?php
include("connexion_mysql.php");
 
 
		//-----------------------------------------------------------------------------------
				echo'<table border=1 bordercolor=pink >';
				echo'<tr><th>Nom :</th><td><select id="nom" onchange="filterLists();">';
				echo '<option value="">---</option>';
				$sql = "select distinct(nom) from information " ;
			    $result = mysql_query($sql, $cnx) or die( mysql_error() ) ;
			    $total = mysql_num_rows($result); 
				while($row = mysql_fetch_array($result)) { 
 
								echo "<option value=".$row['nom'].">".ucfirst($row['nom'])."</option>"; 
				}
				echo '</select>';
 
		//------------------------------------------------------------------------------------
 
				echo'<th>Prénom :</th><td><select id="prenom" onchange="filterLists();">';
				echo '<option value="">---</option>';
				$sql = "select prenom from information " ;
			    $result = mysql_query($sql, $cnx) or die( mysql_error() ) ;
			    $total = mysql_num_rows($result); 
				while($row = mysql_fetch_array($result)) { 
 
								echo "<option value=".$row['prenom'].">".ucfirst($row['prenom'])."</option>"; 
				}
				echo '</select>';
		//------------------------------------------------------------------------------------
 
				echo'<th>Ville :</th><td><select id="ville" onchange="filterLists();">';
				echo '<option value="">---</option>';
				$sql = "select distinct(ville) from information " ;
			    $result = mysql_query($sql, $cnx) or die( mysql_error() ) ;
			    $total = mysql_num_rows($result); 
				while($row = mysql_fetch_array($result)) { 
 
								echo "<option value=".$row['ville'].">".ucfirst($row['ville'])."</option>"; 
				}
				echo '</select>';
		//------------------------------------------------------------------------------------
				echo'<th>Sexe :</th><td><select id="sexe" onchange="filterLists();">';
				echo '<option value="">---</option>';
				$sql = "select distinct(sexe) from information " ;
			    $result = mysql_query($sql, $cnx) or die( mysql_error() ) ;
			    $total = mysql_num_rows($result); 
				while($row = mysql_fetch_array($result)) { 
 
								echo "<option value=".$row['sexe'].">".ucfirst($row['sexe'])."</option>"; 
				}
				echo '</select></table></form>';
		//------------------------------------------------------------------------------------
				  $sql = "select nom,prenom,email,age,tel,datenaissance,sexe,ville from information"; 
				  $qry = mysql_query($sql); 
				  while($row = mysql_fetch_assoc($qry)) { 
					 $data[] = $row; 
				  }
?>
 
<br><br>
 <table> 
      <thead> 
         <tr> 
            <th>Nom</th> 
            <th>Prenom</th> 
            <th>Email</th> 
            <th>Age</th> 
            <th>Tel</th> 
            <th>Date Naissance</th> 
            <th>Sexe</th> 
            <th>Ville</th>
         </tr> 
      </thead> 
 
      <tbody> 
      <?php foreach($data as $row): ?> 
         <tr> 
            <td><?php echo $row['nom']; ?></td> 
            <td><?php echo $row['prenom']; ?></td> 
            <td><?php echo $row['email']; ?></td> 
            <td><?php echo $row['age']; ?></td> 
            <td><?php echo $row['tel']; ?></td> 
            <td><?php echo $row['datenaissance']; ?></td> 
            <td><?php echo $row['sexe']; ?></td> 
            <td><?php echo $row['ville']; ?></td>
         </tr> 
      <?php endforeach; ?> 
      </tbody> 
   </table> 
</body> 
</html>

et le fichier selectListes.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
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
202
203
204
205
206
207
208
209
210
<?php 
 
// Ce script est appelé à chaque sélection d'un élément d'une liste 
 
// suivi du critère 
$where   = array(); 
$data    = array(); 
 
// données sélectionnées => filtres 
$nom    = NULL; 
$prenom    = NULL; 
$ville   = NULL; 
$sexe   = NULL;
 
/** 
 * CE SCRIPT ANALYSE LES SELECTIONS ET RENVOIE DES DONNEES AU FORMAT XML  
 * La structure correspond à ce que jQuery attend pour mettre à jour la page 
 * <?xml version="1.0" encoding="utf-8"?>  
 *    <xml>  
 *    <nom></nom> 
 *    <prenom></prenom>  
 *    <ville></ville>
 *    <sexe></sexe>  
 *    <table></table>  
 * </xml>  
 * 
 * @var SimpleXMLElement 
 */ 
$xml = simplexml_load_string('<?xml version="1.0" encoding="utf-8"?><xml></xml>'); 
 
// on parcourt le tableau $_POST et on vérifie quelles sont les listes qui ont une sélection 
 
 
// nom 
if (isset($_POST['nom'])) { 
   $nom = $_POST['nom']; 
   // echo $nom;
   $where[] = 'nom = \'' . $nom.'\''; 
} 
 
// prenom 
if (isset($_POST['prenom']) ) { 
   $prenom = $_POST['prenom']; 
   // echo $prenom;
   $where[] = 'prenom = \'' .$prenom.'\''; 
} 
 
// villes 
if (isset($_POST['ville']) ) { 
   $ville = $_POST['ville']; 
   // echo $ville;
   $where[] = 'ville = \'' . $ville.'\''; 
} 
 
// sexe 
if (isset($_POST['sexe'])) { 
   $sexe = $_POST['sexe']; 
   // echo $sexe;
   $where[] = 'sexe = \'' .$sexe.'\''; 
} 
 
### FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ)  
$where = ( ! empty($where)) ? 'WHERE ' . implode(' OR ', $where) : NULL; 
 
 // ICI MODIFIEZ LE PARAMETRAGE 
// Connexion à la base de données 
$server = 'localhost'; 
$user   = 'root'; 
$pwd    = 'root'; 
$dbName = 'test'; 
$cnx    = mysql_connect($server, $user, $pwd); 
$db     = mysql_select_db($dbName); 
 
 
// on définit le code SQL commun à toutes les requêtes 
// voir la chaine SQL d'extraction des données de la table (plus bas) 
 
$fromAndWhere = "  information $where";
/** 
 * Crée le code HTML pour les liste relatives aux dates : Jours Mois Années 
 * @param mixed $sql 
 * @return string 
 */ 
 
 
 
 
 
 
 
 
function filtrageDates($sql) { 
   $data = array(); 
   $qry  = mysql_query($sql); 
   $data[] = '<option value=""></option>'; // ligne vide 
   while($row = mysql_fetch_row($qry)) { 
      $data[] = '<option value="' . $row[0] . '">' . $row[0] . '</option>'; 
   } 
   return implode("\n", $data); 
} 
 
/** 
 * Crée le code HTML pour les liste relatives aux villes et matières 
 * @param mixed $sql 
 * @return string 
 */ 
function filtrageVillesMatieres($sql) { 
   $data = array(); 
   $qry = mysql_query($sql); 
   $data[] = '<option value=""></option>'; // ligne vide 
   while($row = mysql_fetch_row($qry)) { 
      $data[] = '<option value="' . $row[0] . '">' . $row[1] . '</option>'; 
   } 
   return implode("\n", $data); 
} 
 
// si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
$fromDates = (NULL === $where) ? 'information' : $fromAndWhere; 
 /*
// si le jour n'a pas déjà été sélectionné -> filtrage de la liste 
// if (NULL === $jour) { 
   // $sql = "SELECT DISTINCT DAY(t_session.date_) FROM $fromDates ORDER BY DAY(t_session.date_);"; 
   // $xml->addChild('jours', filtrageDates($sql)); 
// } 
 
// si le mois n'a pas déjà été sélectionné -> filtrage de la liste 
// if (NULL === $mois) { 
   // $sql = "SELECT DISTINCT MONTH(t_session.date_) FROM $fromDates ORDER BY MONTH(t_session.date_);"; 
   // $xml->addChild('mois', filtrageDates($sql)); 
// } 
 
// si l'année n'a pas déjà été sélectionnée -> filtrage de la liste 
// if (NULL === $annee) { 
   // $sql = "SELECT DISTINCT YEAR(t_session.date_) FROM $fromDates ORDER BY YEAR(t_session.date_);"; 
   // $xml->addChild('annees', filtrageDates($sql)); 
   // $data = array(); 
// } 
 */
// si la ville n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $ville) { 
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
   $from = (NULL === $where) ? 'information' : $fromAndWhere; 
   $sql = "SELECT DISTINCT ville FROM $from ;"; 
   $xml->addChild('ville', filtrageVillesMatieres($sql));  
   $data = array(); 
}
// si la ville n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $prenom) { 
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
   $from = (NULL === $where) ? 'information' : $fromAndWhere; 
   $sql = "SELECT DISTINCT prenom FROM $from ;"; 
   $xml->addChild('prenom', filtrageVillesMatieres($sql));  
   $data = array(); 
} 
// si la ville n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $sexe) { 
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
   $from = (NULL === $where) ? 'information' : $fromAndWhere; 
   $sql = "SELECT DISTINCT sexe FROM $from ;"; 
   $xml->addChild('sexe', filtrageVillesMatieres($sql));  
   $data = array(); 
}  
 
// si la matière n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $nom) { 
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
   $from = (NULL === $where) ? 'information' : $fromAndWhere; 
   $sql = "SELECT DISTINCT nom FROM $from ;"; 
   $xml->addChild('nom', filtrageVillesMatieres($sql)); 
   $data = array(); 
} 
 
 
// données de la table 
$sql =" 
SELECT  
   nom,prenom,email,age,tel,datenaissance,sexe,ville
FROM  
   $fromAndWhere";
 // echo $sql;
$data = array(); 
$qry = mysql_query($sql); 
// mise en forme des données 
// ici on reconstruit les données de la table 
while($row = mysql_fetch_assoc($qry)) { 
   $data[] =  
			"<tr> 
			   <td>".$row['nom']."</td> 
			   <td>".$row['prenom']."</td> 
			   <td>".$row['email']."</td> 
			   <td>".$row['age']."</td> 
			   <td>".$row['tel']."</td> 
			   <td>".$row['datenaissance']."</td> 
			   <td>".$row['sexe']."</td> 
			   <td>".$row['ville']."</td> 
			</tr>" ; 
} 
 
if (empty($data)) { // pas de données correspondant au filtre 
   $data[] = '<tr></tr>'; 
}  
 
$xml->addChild('table', implode("\n", $data)); # noeud attendu par jQuery dans filterLists() 
 
 
// Envoi du header et des données 
header('content-type: text/xml'); 
echo $xml->asXML(); 
 
?>

le probléme c'est que lorsque je choisis un item dans le select , les données se filtres et je les vois quand je fais ctrl+shift+j. par exemple si je choisis dans le menu sexe :femme, il y a un fichier xml qui contient les données de la table seulement des femmes. mais le tableau html reste le méme , normalement devra filtrer les données !

Nom : filtreliste.png
Affichages : 289
Taille : 58,4 Ko

Nom : filtreliste.png
Affichages : 289
Taille : 58,4 Ko

c quoi le probléme à vos avis !
bon j'ai suivi l'exemple de rawsrc;

**k'amm** · 28/01/2013, 13h31

D'après le problème que tu indiques, à savoir le non rafraichissement du tableau HTML, ton soucis se situe au niveau de cette ligne :

Code :

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

if ((code = $(response).find('nom').text()).length)    $('#nom').html(code);

Essaies de voir déjà si tu rentres dans le cas du success (normalement oui vu que tu reçois une réponse) et ensuite à quoi correspond cette ligne.

En l’occurrence, il s'agit ici de pousser dans l'élément id "nom" la réponse que tu reçois en XML !
Sauf que ton id "nom" correspond à <select id="nom" onchange="filterLists();">En premier test, tu pourrais mettre un id sur le tbody de ton tableau (par exemple "content") et essaies d'injecter la réponse XML dedans - avec $('#content').html(code); et voir ce que ça donnera, puis adapter en fonction

**owenho** · 29/01/2013, 20h07

Merci infiniment M. k'amm ,

effectivement j'ai oublié de mettre un id pour le tableau,

Crdt

aide sur le code source de liste déroulante dynamique

Langage PHP

Discussions similaires

Partager

Partager