[AJAX] Plusieurs listes liées

**CinePhil** · 20/09/2011, 12h20

Je crains que ça ressemble fort à ce que j'ai déjà posté mais voilà...

Dans index1.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
<script type="application/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="application/javascript" charset="utf-8" src="./javascript/annales.js"></script>
 
<p><strong>Annales d'examens</strong></p>
 
<!-- Critères de recherche -->
<p>S&eacute;lectionnez de un &agrave; plusieurs crit&egrave;res de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche" method="POST">
 
<?php
require("listeschoix.php");
?>
    <br /><input id="seek" name="Chercher" type="submit" value="Chercher" />
    <input type="hidden" name="modifier" value="<?php echo $_REQUEST['modifier']; ?>" />
</form>
<br />

Dans listeschoix.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
require("conn_db.php"); // Connexion à la BDD
?>
<!-- Liste de choix du diplôme -->
<div class="libelle">Dipl&ocirc;me :&nbsp;</div>
<select id="sel_exams" name="sel_exams" onChange="filterLists()">
    <option value=""></option>
 
<?php 
$query = " 
    SELECT DISTINCT Examen 
    FROM v_annale 
    ORDER BY Examen 
";
 
$result = mysql_query($query);
$affiche = '';
 
while ($exams = mysql_fetch_row($result))
{
    $examen = $exams[0];
    $affiche .= "<option value=\"$examen\" ";
    if($_POST['sel_exams'] == $examen)
    {
        $affiche .= 'selected=\"selected\" ';
    }
    $affiche .= ">";
    $affiche .= $examen;
    $affiche .= "</option>";
} // fin while
 
echo $affiche;
?>
</select>
<br />
 
<!-- Liste de choix de l'année -->
<div class="libelle">Ann&eacute;e :&nbsp;</div>
<select id="sel_annees" name="sel_annees" onChange="filterLists()">
    <option value =""></option>
 
<?php 
$query = " 
    SELECT DISTINCT Annee 
    FROM v_annale 
    ORDER BY Session 
";
 
$result = mysql_query($query);
$affiche = '';
 
while ($annees = mysql_fetch_row($result))
{
    $annee = $annees[0];
    $affiche .= "<option value=\"$annee\" ";    
    if($_POST['sel_annees'] == $annee)
    {
        $affiche .= 'selected=\"selected\" ';
    }
    $affiche .= ">";
    $affiche .= $annee;
    $affiche .= "</option>";
} // fin while
 
echo $affiche;
?>
</select>
<br />
 
<!-- Liste de choix de la session -->
<div class="libelle">Session :&nbsp;</div>
<select id="sel_sessions" name="sel_sessions" onChange="filterLists()">
    <option value =""></option>
 
<?php 
$query = " 
    SELECT DISTINCT Session 
    FROM v_annale 
    ORDER BY Session 
";
 
$result = mysql_query($query);
$affiche = '';
 
while ($sessions = mysql_fetch_row($result))
{
    $session = $sessions[0];
    $affiche .= "<option value=\"$session\" ";
    if($_POST['sel_sessions'] == $session)
    {
        $affiche .= 'selected=\"selected\" ';
    }
    $affiche .= ">";
    $affiche .= $session;
    $affiche .= "</option>";
} // fin while
 
echo $affiche;
?>
</select>
<br />
 
<!-- Liste de choix du thème -->
<div class="libelle">Th&egrave;me :&nbsp;</div>
<select id="sel_themes" name="sel_themes" onChange="filterLists()">
    <option value=""></option>
 
<?php 
$query = " 
    SELECT DISTINCT Contenu 
    FROM v_annale 
    ORDER BY Contenu 
";
 
$result = mysql_query($query);
$affiche = '';
 
while ($themes = mysql_fetch_row($result))
{
    $theme = $themes[0];
    $affiche .= "<option value=\"$theme\" ";
    if($_POST['sel_themes'] == $theme)
    {
        $affiche .= 'selected=\"selected\" ';
    }
    $affiche .= ">";
    $affiche .= $theme;
    $affiche .= "</option>";
} // fin while
 
echo $affiche;
 
mysql_close($mysql_link);
 
?>
</select>
<br />

annales.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
function filterLists() {
    // ici on récupère les valeurs sélectionnées pour chaque liste avec les sélecteurs de jQuery
    var exam    = $('#sel_exams option:selected').val();
    var annee   = $('#sel_annees option:selected').val();
    var session = $('#sel_sessions option:selected').val();
    var theme   = $('#sel_themes 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: 'majlistes.php',   // script à exécuter sur le serveur
        data: 'examen='+exam+'&annee='+annee+'&session='+session+'&theme='+theme,   // 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('exams').text()).length)    $('#sel_exams').html(code);
            if ((code = $(response).find('annees').text()).length)   $('#sel_annees').html(code);
            if ((code = $(response).find('sessions').text()).length) $('#sel_sessions').html(code);
            if ((code = $(response).find('themes').text()).length)   $('#sel_themes').html(code);
        }
    });
} // Fin function filterLists

majlistes.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
$where   = array();
$data    = array();
 
# données sélectionnées
$examen  = NULL;
$annee   = NULL;
$session = NULL;
$theme   = NULL;
 
# résultat à envoyer
/**
 * @var SimpleXMLElement
 */
$xml = simplexml_load_string('<?xml version="1.0" encoding="utf-8"?><xml></xml>');
 
# examen
if (isset($_POST['examen']) && (strlen($_POST['examen']) > 0)) 
{
    $examen  = $_POST['examen'];
    $where[] = 'Examen = "' . mysql_escape_string($examen) . '"';
    exit;
}
# année
if (isset($_POST['annee']) && ctype_digit("{$_POST['annee']}")) 
{
    $annee   = $_POST['annee'];
    $where[] = 'Annee = ' . intval($annee);
}
# session
if (isset($_POST['session']) && (strlen($_POST['session']) > 0)) 
{
    $session = $_POST['session'];
    $where[] = 'Session = "' . mysql_escape_string($session) . '"';
}
# theme
if (isset($_POST['theme']) && (strlen($_POST['theme']) > 0)) 
{
    $theme = $_POST['theme'];
    $where[] = 'Contenu = "' . mysql_escape_string($theme) . '"';
}
 
/* FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ) */
$where = (empty($where)) ? NULL : 'WHERE ' . implode(' AND ', $where);
 
// Connexion à la BDD
require("conn_db.php"); // Connexion à la BDD
 
// si l'examen n'a pas déjà été sélectionné -> filtrage
if (NULL === $examen) 
{
    $sql = "
        SELECT DISTINCT Examen 
        FROM v_annale 
        $where 
        ORDER BY Examen
    ";
    // extraction des données -> $exams = array()
    $result = mysql_query($sql);
 
    while($row = mysql_fetch_row($result))
    {
        $exams[] = $row[0];
    }
 
    // mise en forme des données
    $data[] = '<option value=""></option>'; # ligne vide
 
    foreach($exams as $exam) 
    {
        $data[] = '<option value="' . $exam . '">' . $exam . '</option>';
    }
 
    $xml->addChild('exams', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
    $data = array();
} // fin if (NULL === $examen) 
 
// si l'année n'a pas déjà été sélectionnée -> filtrage
if (NULL === $annee) 
{
    $sql = "
        SELECT DISTINCT Annee 
        FROM v_annale 
        $where 
        ORDER BY Annee
    ";
 
    // extraction des données -> $annees = array()
    $result = mysql_query($sql);
 
    while($row = mysql_fetch_row($result))
    {
        $annees[] = $row[0];
    }
 
    // mise en forme des données
    $data[] = '<option value=""></option>'; # ligne vide
 
    foreach($annees as $annee) 
    {
        $data[] = '<option value="' . $annee . '">' . $annee . '</option>';
    }
 
    $xml->addChild('annees', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
    $data = array();
} // fin if (NULL === $annee)
 
// si la session n'a pas déjà été sélectionnée -> filtrage
if (NULL === $session) 
{
    $sql = "
        SELECT DISTINCT Session 
        FROM v_annale 
        $where 
        ORDER BY Session
    ";
    // extraction des données -> $sessions = array()
    $result = mysql_query($sql);   
 
    while($row = mysql_fetch_row($result))
    {
        $sessions[] = $row[0];
    }
 
    // mise en forme des données
    $data[] = '<option value=""></option>'; # ligne vide
 
    foreach($sessions as $id => $session) 
    {
        $data[] = '<option value="' . $id . '">' . $session . '</option>';
    }
 
    $xml->addChild('sessions', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
    $data = array();
} // Fin if (NULL === $session) 
 
// si le theme n'a pas déjà été sélectionné -> filtrage
if (NULL === $theme) 
{
    $sql = "
        SELECT DISTINCT Contenu 
        FROM v_annale 
        $where 
        ORDER BY Contenu
    ";
 
    // extraction des données -> $sessions = array()
    $result = mysql_query($sql);   
 
    while($row = mysql_fetch_row($result))
    {
        $themes[] = $row[0];
    }
 
    // mise en forme des données
    $data[] = '<option value=""></option>'; # ligne vide
 
    foreach($themes as $theme) 
    {
        $data[] = '<option value="' . $theme . '">' . $theme . '</option>';
    }
 
    $xml->addChild('themes', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
    $data = array();
} // Fin if (NULL === $theme) 
 
header('content-type: text/xml');
echo $xml->asXML();
 
mysql_close($mysql_link);
 
?>

**rawsrc** · 21/09/2011, 12h56

Bonjour,

J'ai parcouru le code source et j'ai deux remarques :

- dans le fichier listeschoix.php, il n'y a pas d'utilité à gérer le paramètre selected d'une liste. La fonction filterLists() ne s'occupe de modifier que les listes qui n'ont pas de sélection, donc celles qui ont été sélectionnées ne perderont pas leur ligne "selected" et surtout ne verront pas leur code changer au retour de la requête ajax.

- dans le fichier majlistes.php, en ligne 21 il y a un exit; qui se ballade tout seul !

Pour le reste je ne vois pas trop pourquoi ton script ne te renvoie pas les données. Le code de traitement me semble correcte, si tu continues à avoir ce problème, va falloir se pencher sur le code du bouton Chercher, voire ta bdd.

**CinePhil** · 21/09/2011, 15h23

Bonjour

Envoyé par rawsrc

- dans le fichier listeschoix.php, il n'y a pas d'utilité à gérer le paramètre selected d'une liste. La fonction filterLists() ne s'occupe de modifier que les listes qui n'ont pas de sélection, donc celles qui ont été sélectionnées ne perderont pas leur ligne "selected" et surtout ne verront pas leur code changer au retour de la requête ajax.

J'ai supprimé la gestion des "selected" mais du coup quand le résultat de la recherche s'affiche, toutes les listes affichent la ligne vide et on ne sait plus ce que l'on a sélectionné. OK on le voit dans le résultat mais bon...

- dans le fichier majlistes.php, en ligne 21 il y a un exit; qui se ballade tout seul !

Viré !

Le problème persiste.
1) Choix dans une liste
Option : choix ou pas d'une valeur dans une autre liste
2) Choix du blanc de la même liste
3) Autre choix dans la même liste => toutes les autres listes vides !

si tu continues à avoir ce problème, va falloir se pencher sur le code du bouton Chercher,

Dans le processus que j'ai décrit ci-dessus, je n'utilise pas le bouton chercher.

voire ta bdd.

Elle est normalisée.

Je pense que c'est la construction du WHERE dans majliste qui pose problème.

Comment puis-je afficher la valeur du $where envoyé aux requêtes alors que le script majliste est exécuté par Ajax ?

[AJAX] Plusieurs listes liées

AJAX

Discussions similaires

Partager

Partager