Listes liées PHP JQUERY
Bonsoir,
Je suis en train d'essayer de réaliser un filtre de données avec plusieurs critères.
Je suis parti du tuto suivant: ici qui est très bien détaillé. J'ai adapté le code a mon mini projet de test.
Cependant je rencontre quelques difficultés.
Voici mon code:
page index.php
fichier filterLists.php
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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<!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 type = $('#type option:selected').val(); var lieu = $('#lieu 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: 'type='+type+'&lieu='+lieu, // 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('type').text()).length) $('#type').html(code); if ((code = $(response).find('lieu').text()).length) $('#lieu').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 // TYPE $sql = 'SELECT DISTINCT type.id_type, type.titre_type FROM type ORDER BY type.titre_type;'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $types[$row[0]] = $row[1]; } // LIEU $sql = 'SELECT DISTINCT lieu.id_lieu, lieu.titre_lieu FROM lieu ORDER BY lieu.titre_lieu;'; $qry = mysql_query($sql); while($row = mysql_fetch_row($qry)) { $lieux[$row[0]] = $row[1]; } // DONNES DE LA TABLE $sql = " SELECT type.titre_type, lieu.titre_lieu, produit.description FROM produit INNER JOIN type ON type.id_type = type.id_type INNER JOIN lieu ON lieu.id_lieu = lieu.id_lieu ORDER BY type.titre_type ASC, lieu.titre_lieu 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 PRODUITS</strong></p> <p>Sélectionnez de un à plusieurs critères de recherche.</p> <form id="frmRecherche"> <!-- Liste des types --> <label for="types">Types</label> <select id="types" onchange="filterLists();"> <option value=""></option> <?php foreach($types as $id => $type): ?> <option value="<?php echo $id; ?>"><?php echo $type; ?></option> <?php endforeach; ?> </select> <!-- Liste des lieux --> <label for="lieux">Lieux</label> <select id="lieux" onchange="filterLists();"> <option value=""></option> <?php foreach($lieux as $id => $lieu): ?> <option value="<?php echo $id; ?>"><?php echo $lieu; ?></option> <?php endforeach; ?> </select> </form> <!-- Données de la table --> <table> <thead> <tr> <th>TYPES</th> <th>LIEUX</th> <th>DESCRIPTION</th> </tr> </thead> <tbody id="table"> <?php foreach($data as $row): ?> <tr> <td><?php echo $row['titre_type']; ?></td> <td><?php echo $row['titre_lieu']; ?></td> <td><?php echo $row['description']; ?></td> </tr> <?php endforeach; ?> </tbody> </table> </body> </html>
la page index affiche bien les 2 listes déroulantes mais par contre dans le tableau j'ai plein d'erreur undefinied index.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
Quand je change ma sélection dans les listes rien ne se passe.
De plus j'avais des problème avec cette notation <<<SQL que j'ai du remplacer par des "" pour ne pas avoir d'erreur.
Si quelqu’un à la solution a mon problème je suis preneur
Merci d'avance.
Répondre avec citation
.
Partager