Listes déroulantes liées

**seb221** · 16/11/2014, 13h23

Bonjour,
je suis débutant sur le php, je souhaiterais créer un lien entre 2 listes déroulantes dans l'immédiat cependant je suis bloqué depuis quelques jours et je ne comprends pas du tout mon erreur. Je me suis basé sur un exemple que j'ai pu récupérer sur internet.
Donc, j'ai une base de donnée (test) sous mysql via wamp, avec les tables suivantes: client(id_client, nom, prenom), oeuvre (id_oeuvre, titre, auteur) et la table emprunt(id_emprunt, id_oeuvre, id_client).
Je vous joints les codes.

index

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> 
<head> 
  <meta http-equiv="Cache-Control" content="no-cache"> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Listes liées</title> 
  <link rel="stylesheet" type="text/css" href="my.css"> 
  <script type="application/javascript" charset="utf-8" src="http://code.jquery.com/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 client = $('#clients option:selected').val(); 
  var oeuvre = $('#oeuvres 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: 'filterlists.php', // script à exécuter sur le serveur 
	data: 'client='+client+'oeuvre='+oeuvre, // 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('clients').text()).length) $('#clients').html(code); 
		if ((code = $(response).find('oeuvres').text()).length) $('#oeuvres').html(code); ; 
		if ((code = $(response).find('table').text()).length) $('#table').html(code); 
		} 
  }); 
  } 
  </script> 
  <style type="text/css"> 
  body { font-family: "arial"; } 
  table { width: 600px;;} 
  table, tr, th, td { border: 1px solid black; border-collapse: collapse; padding: 4px;} 
  .alignr { text-align: right; } 
  .alignc { text-align: center; } 
  </style> 
</head> 
<body> 
  <?php 
 
  // ICI MODIFIEZ LE PARAMETRAGE 
  // Connexion à la base de données 
  $server = 'localhost'; 
  $user = 'root'; 
  $pwd = ''; 
  $dbName = 'test'; 
  $cnx = mysql_connect($server, $user, $pwd); 
  $db = mysql_select_db($dbName); 
 
  // Au démarrage, aucune sélection : on extrait toutes les données individuellement pour chaque liste 
 
  // clients
  $sql = 'SELECT DISTINCT client.nom FROM client ORDER BY client.nom;'; 
  $qry = mysql_query($sql); 
  while($row = mysql_fetch_row($qry)) { 
	$clients[] = $row[0]; 
  } 
 
  // oeuvres 
  $sql = 'SELECT DISTINCT oeuvre.titre FROM oeuvre ORDER BY oeuvre.titre;'; 
  $qry = mysql_query($sql); 
  while($row = mysql_fetch_row($qry)) { 
	$oeuvres[] = $row[0]; 
  } 
 
 // DONNES DE LA TABLE 
  $sql = " SELECT client.nom, oeuvre.titre FROM emprunt
  INNER JOIN client ON emprunt.id_client = client.id_client
  INNER JOIN oeuvre ON emprunt.id_oeuvre = oeuvre.id_oeuvre
  ORDER BY nom ASC, titre ASC";
 
  $qry = mysql_query($sql); 
  while($row = mysql_fetch_assoc($qry)) { 
	$data[] = $row; 
  } 
 
  // pour chaque liste il faut prévoir leur retrait du filtre  
  // en insérant une ligne vide en début de liste : <option value=""></option> 
 
  ?> 
 
 
  <p><strong>LISTE DES EMPRUNTS</strong></p> 
  <p>Sélectionnez de un à plusieurs critères de recherche.</p> 
  <form id="frmRecherche"> 
 
  <!-- Liste des clients --> 
  <label for="clients">Clients</label> 
  <select id="clients" onchange="filterLists();"> 
		<option value=""></option> 
		<?php foreach($clients as $client): ?> 
		<option value="<?php echo $client; ?>"><?php echo $client; ?></option> 
		<?php endforeach; ?> 
  </select> 
 
 
  <!-- Liste des oeuvre --> 
  <label for="oeuvres">Oeuvres</label> 
  <select id="oeuvres" onchange="filterLists();"> 
		<option value=""></option> 
		<?php foreach($oeuvres as $oeuvre): ?> 
		<option value="<?php echo $oeuvre; ?>"><?php echo $oeuvre; ?></option> 
		<?php endforeach; ?> 
  </select> 
  </form> 
 
 <!-- Données de la table --> 
 
 <table> 
	<thead> 
		<tr> 
			<th>CLIENTS</th> 
			<th>OEUVRES</th> 
		</tr> 
	</thead> 
 
	<tbody id="table"> 
	<?php foreach($data as $row): ?> 
		<tr> 
			<td><?php echo $row['nom']; ?></td> 
			<td><?php echo $row['titre']; ?></td>
		</tr> 
	<?php endforeach; ?> 
	</tbody>  
  </table> 
</body> 
</html>

filterlists

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
 
<?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 
$clients = NULL; 
$oeuvres = NULL; 
$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 
 
// Client 
if (isset($_POST['clients']) && (ctype_digit("{$_POST['clients']}"))) { 
  $type = $_POST['clients']; 
  $where[] = 'emprunt.id_client= ' . intval($client); 
} 
 
// Oeuvre
if (isset($_POST['oeuvres']) && (ctype_digit("{$_POST['oeuvres']}"))) { 
  $lieu = $_POST['oeuvres']; 
  $where[] = 'emprunt.id_oeuvre = ' . intval($oeuvres); 
} 
 
### FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ)  
$where = ( ! empty($where)) ? 'WHERE ' . implode(' AND ', $where) : NULL; 
 
// ICI MODIFIEZ LE PARAMETRAGE 
// Connexion à la base de données 
$server = 'localhost'; 
$user = 'root'; 
$pwd = ''; 
$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 = <<<SQL
emprunt
  INNER JOIN client ON emprunt.id_client = client.id_client
  INNER JOIN oeuvre ON emprunt.id_oeuvre = oeuvre.id_oeuvre   
$where 
SQL;
 
/** 
 * Crée le code HTML pour les liste relatives aux villes et matières 
 * @param mixed $sql 
 * @return string 
 */ 
function filtrageTypesClients($sql) { 
  $data = array(); 
  $qry = mysql_query($sql) or die (mysql_error()); 
  $data[] = '<option value=""></option>'; // ligne vide 
  while($row = mysql_fetch_row($qry))  { 
  $data[] = '<option value="' . $row[0] . '">' . $row[0] . '</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) ? 'emprunt' : $fromAndWhere; 
 
 
// si le type n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $clients) { 
  // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
  $from = (NULL === $where) ? 'client' : $fromAndWhere; 
  $sql = "SELECT DISTINCT nom FROM $from ORDER BY nom;"; 
  $xml->addChild('clients', filtrageTypesClients($sql));  
  $data = array(); 
} 
 
 
// si le type n'a pas déjà été sélectionnée -> filtrage de la liste 
if (NULL === $oeuvres) { 
  // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php) 
  $from = (NULL === $where) ? 'oeuvre' : $fromAndWhere; 
  $sql = "SELECT DISTINCT titre FROM $from ORDER BY titre;"; 
  $xml->addChild('oeuvres', filtrageTypesClients($sql));  
  $data = array(); 
} 
 
 
// données de la table 
 
$sql = <<<SQL
SELECT  
   client.nom,  
   oeuvre.titre  
FROM  
   $fromAndWhere
ORDER BY
   client.nom ASC,  
   oeuvre.titre ASC;
SQL;
 
$data = array(); 
echo $data;
$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[] = <<<HTML
<tr> 
  <td>{$row['nom']}</td> 
  <td>{$row['titre']}</td> 
  
</tr> 
HTML;
} 
 
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(); 
 
?>

Lorsque que je sélectionne une valeur dans une fenêtre déroulante cela ne mets pas à jour l'autre liste déroulante.
Désolé, pour la longueur du code.
Merci pour votre aide.

**freddou17** · 17/11/2014, 10h05

Slt,

peux tu faire un echo de te variable response, de plus length est une proprité de l'objet js, tu devrais plutôt vérifier sa taille...

Code javascript :

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

1
2
if ((code = $(response).find('clients').text()).length) $('#clients').html(code); 
		...

++

**seb221** · 17/11/2014, 21h29

Bonsoir,
désolé mais je ne vois pas comment afficher la valeur de response car j'ai un message d'erreur lorsque je mets " echo response;"
Je ne vois pas comment appeler la fonction affiche la valeur de response.

**seb221** · 18/11/2014, 22h53

Personne pour me venir en aide?

**freddou17** · 19/11/2014, 09h27

slt,

ce n'est pas echo echo response mais console.log(response)!!! utilises tu firebug ou autre outils de dev??

**seb221** · 19/11/2014, 14h55

Ok je test cela ce soir.
Oui j'utilise firebug, mais j'aurais voulu savoir si on pouvais mettre des espions pour faire du pas à pas afin de comprendre un peu mieux d'où pourrais provenir le problème.

Listes déroulantes liées

jQuery

Vue hybride

Discussions similaires

Partager

Partager