[AJAX] Plusieurs listes liées
Bonjour,
Je découvre Ajax et, grâce notamment à l'exemple donné dans cette discussion, je suis presque arrivé à faire ce que je veux.
Sauf que mon formulaire de recherche contient 4 zones de liste et non pas 2.
L'utilisateur peut rechercher des anales d'examens selon :
- le diplôme (liste "sel_exam") ;
- l'année (liste "sel_annee") ;
- la session (liste "sel_session") ;
- le thème (liste "sel_theme") ;
Au niveau BDD, rien de compliqué pour l'instant, tout est dans une seule table.
J'ai mis la partie Ajax dans le programme index1.php qui initialise le formulaire et la génération des listes de choix dans le programme listeschoix.php.
index1.php :
listeschoix.php :
Code PHP : 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<script type="text/javascript"> ///////////////// // AJAX ///////////////// /* Initialisation XMLHttpRequest */ 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é par le navigateur alert ("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } /* majListes : met à jour les listes de choix en fonction du choix dans une des listes */ function majListes(listeChangee, valeurChoisie) { var listeChangee; // Nom de la liste dans laquelle a été fait un choix var valeurChoisie; // Valeur choisie dans la liste changée var data = null; // Paramètres à passer pour la construction des listes à mettre à jour var xhr = getXhr(); xhr.onreadystatechange = function() { // si on a tout reçu et que le serveur est ok if(xhr.readyState == 4 && xhr.status == 200) { texthtml = xhr.responseText; // On se sert de innerHTML pour refaire les listes de sélection en fonction du ou des choix document.getElementById("form_recherche").innerHTML = texthtml; } } // on définit la méthode (post) + le fichier de traitement + asynchrone (true) xhr.open("POST","listeschoix.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // on poste les paramètres à transmettre au fichier qui fera le traitement if(listeChangee != "" && valeurChoisie != "") { data = "lmodif="+listeChangee+"&valchoisie="+valeurChoisie; } xhr.send(data); } // Fin function majListes <p><strong>Annales d'examens</strong></p> <!-- Critères de recherche --> <p>Sélectionnez de un à plusieurs critères de recherche et cliquez sur le bouton "Chercher".</p> <hr /> <form id="form_recherche"> <?php require("listeschoix.php"); ?> </form>
L'utilisateur choisit une option dans, par exemple, la liste des diplômes. Je récupère bien l'option choisie qui s'affiche dans la liste des diplômes et les autres listes sont paramétrées en fonction de ce choix.
Code PHP : 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
82require("conn_db.php"); // Connexion à la BDD mysql_query("SET NAMES 'utf8' "); // Paramètres éventuellements passés par fonction Ajax majListes if(isset($_POST['lmodif']) && $_POST['lmodif'] != '') { $liste_changee = $_POST['lmodif']; } if(isset($_POST['valchoisie']) && $_POST['valchoisie'] != '') { $valeur_choisie = $_POST['valchoisie']; } if(!isset($param)) { $param = array(); // tableau de tous les choix effectués par l'utilisateur } $param["$liste_changee"] = $valeur_choisie; ?> <!-- Liste de choix du diplôme --> <select id="sel_exam" onChange="majListes('sel_exam', this.options[this.selectedIndex].value)"> <option>-- Diplôme --</option> <?php $where = 'WHERE 1 '; if($param['sel_annee'] != '') { $where .= " AND Annee = ".intval($valeur_choisie)." "; } if($param['sel_session'] != '') { $where .= " AND Session = '".mysql_real_escape_string($valeur_choisie)."' "; } if($param['sel_theme'] != '') { $where .= " AND Contenu = '".mysql_real_escape_string($valeur_choisie)."' "; } $query = " SELECT DISTINCT Examen FROM examen $where ORDER BY Examen "; $result = mysql_query($query); $affiche = ''; while ($row = mysql_fetch_row($result)) { $examen = $row[0]; $affiche .= "<option value=\"$examen\" "; if($liste_changee == 'sel_exam' && $valeur_choisie == $examen) { $affiche .= "selected=\"selected\" "; } $affiche .= ">"; $affiche .= $examen; $affiche .= "</option>"; } // fin while echo $affiche; ?> </select> // puis la même chose pour les autres listes <input id="seek" name="Chercher" type="submit" value="Chercher" /> <?php // Transfert du tableau des options déjà choisies foreach($param as $cle=>$valeur) { ?> <input type="hidden" name="param['<?php echo $cle; ?>']" value="<?php echo $valeur; ?>" /> <?php } ?>
Mais si l'utilisateur choisit maintenant une option supplémentaire dans une autre liste pour affiner son choix, la première sélection est annulée.
Je ne trouve pas comment garder en mémoire, en deux appels Ajax, la ou les premières sélections qui ont été faites afin que le WHERE de mes requêtes s'alimente petit à petit de toutes les options choisies et que ces options choisies restent affichées comme sélectionnées dans les listes.
Une idée ou une solution à me proposer ?
Merci d'avance à ceux qui répondront.
Répondre avec citation
Envoyé par CinePhil
Une recherche dans les selles ?
Alors une petite explication de texte du Javascript/Ajax me serait fort utile, si ce n'est pas trop demander.
Partager