[AJAX] Plusieurs listes liées

Version imprimable

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 :

Code:

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
<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&eacute;lectionnez de un &agrave; plusieurs crit&egrave;res de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche">
 
<?php
require("listeschoix.php");
?>
 
</form>

listeschoix.php :

Code:

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
require("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&ocirc;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 
}
?>

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.

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.

Citation:

Envoyé par CinePhil

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") ;

C'est pour un site de proctologie ? :lefou: Une recherche dans les selles ?

Bref. Avec 3 listes, ca se complique. Avec 4 listes ... encore plus.

Exemple avec 4 listes :
- onchange sur liste1 -> modifier liste2 + vider liste3 + vider liste4
- onchange sur liste2 -> modifier liste3 + vider liste4
- onchange sur liste3 -> modifier liste4
A chaque fois, on va transmettre a ajax les 4 valeurs (des 4 listes)

Sauf erreur, ca pourrait donner ca :

Code:

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
	<script type="text/javascript">
	/* 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;
	};
 
	function changeLesListes(num){
		var num; // numero de la liste a partir de laquelle on va faire les changements
		var div1 = document.getElementById('ididliste1');
		var div2 = document.getElementById('ididliste2');
		var div3 = document.getElementById('ididliste3');
		var val1 = div1.options[div1.selectedIndex].value;
		var val2 = div2.options[div2.selectedIndex].value;
		var val3 = div3.options[div3.selectedIndex].value;
		// SI la liste 1 a changé
		if(num==1) { 
			changeListFromList(val1,0,0,2,'iddivListe2'); // liste 2 -> on modifie
			changeListFromList(val1,0,0,3,'iddivListe3'); // liste 3 -> defaut
			changeListFromList(val1,0,0,4,'iddivListe4'); // liste 4 -> defaut
		// SI la liste 2 a changé
		} else if(num==2) {
			changeListFromList(val1,val2,0,3,'iddivListe3'); // liste 3 -> on modifie
			changeListFromList(val1,val2,0,4,'iddivListe4'); // liste 4 ->defaut
		// SI la liste 3 a changé
		} else if(num==3) {
			changeListFromList(val1,val2,val3,4,'iddivListe4'); // liste 4 -> on modifie
		}
	};
 
	/* Changer la liste n+1 après choix dans la liste n */
	function changeListFromList(val1,val2,val3,numliste,iddiv){
		var val1; // valeur de l option choisie (liste 1)
		var val2; // valeur de l option choisie (liste 2)
		var val3; // valeur de l option choisie (liste 3)
		var numliste; // numero de la liste A MODIFIER 
		// -> pour le nom de fichier a utiliser : listeslieesAjax-liste2.php, listeslieesAjax-liste3.php ou listeslieesAjax-liste4.php
		var iddiv; // id du div qu'on remplira
 
		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 rajouter les options a la liste des "selections"
				document.getElementById(iddiv).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","listeslieesAjax-liste"+numliste+".php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("val1="+val1+"&val2="+val2+"&val3="+val3);
	};
	</script>

formulaire :

Code:

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
	<form method="post" action="fichier-de-traitement.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1" onchange="changeLesListes(1);">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="0">Choisissez ...</option>
				<option value="1">Métiers</option>
				<option value="2">Particuliers</option>
				<option value="3">Jardins</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez avant dans la liste 1)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Liste 3 : </label>
			<span id="iddivListe3"><!-- par innerHTML AJAX va ecrire la liste 3 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste3" name="idliste3">
				<option value="0">(Choisissez avant dans la liste 2)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Liste 4 : </label>
			<span id="iddivListe4"><!-- par innerHTML AJAX va ecrire la liste 4 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste4" name="idliste4">
				<option value="0">(Choisissez avant dans la liste 3)</option>
			</select>
			</span>	
		</p>
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>

Et les 3 fichiers appelés par ajax :
- listeslieesAjax-liste2.php

Code:

1
2
3
4
5
6
7
8
9
<?php 
// [ ......................]
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['val1']) && is_numeric($_POST['val1']) && $_POST['val1']!=0)
{
        // recuperation de id_liste1
        $id_liste1_selected = intval($_POST['val1']);
// [ ......................]
?>

- listeslieesAjax-liste3.php

Code:

1
2
3
4
5
6
7
8
9
<?php 
// [ ......................]
// Ajax : Changer la liste 3 après choix dans la liste 2
if(isset($_POST['val2']) && is_numeric($_POST['val2']) && $_POST['val2']!=0)
{
        // recuperation de id_liste1
        $id_liste2_selected = intval($_POST['val2']);
// [ ......................]
?>

- listeslieesAjax-liste4.php

Code:

1
2
3
4
5
6
7
8
9
<?php 
// [ ......................]
// Ajax : Changer la liste 4 après choix dans la liste 3
if(isset($_POST['val3']) && is_numeric($_POST['val3']) && $_POST['val3']!=0)
{
        // recuperation de id_liste1
        $id_liste3_selected = intval($_POST['val3']);
// [ ......................]
?>

30/08/2011, 22h19
CinePhil

Merci pour la réponse mais ce n'est pas tout à fait comme ça que ça doit fonctionner.
Ce n'est pas d'abord choix dans liste 1 qui détermine le contenu de la liste 2 puis choix dans la liste 2 qui détermine le contenu de la liste 3...

L'utilisateur peut faire un choix dans n'importe quelle liste en premier puis, s'il veut affiner sa recherche, dans n'importe laquelle des 3 autres listes etc... comme il veut et dans l'ordre qu'il veut.

Mais ta réponse me donne quand même une idée que je testerai demain : passer en paramètre à la fonction AJAX les 4 choix qui peuvent potentiellement être vides et repasser en data à PHP ces 4 choix pour construire le WHERE et actualiser les listes.

À suivre...

Bonjour,

je me permets de me mêler de la conversation car ayant fait des tonnes de listes liées, je m'étais déjà penché sur la problématique et je vous soumets une piste de travail que j'ai adaptée à la problématique de CinePhil.
L'approche diffère dans la mesure ou je profite de jQuery pour faire tout le boulot.

Bon, c'est schématique, pas sécurisé mais l'approche est optimisée.
L'idée consiste à ne mettre à jour que ce qui est nécessaire à savoir : les liste non encore sélectionnées. Celles qui l'ont été n'ont pas besoin de mise à jour, elles doivent nous donner leur sélection afin de pouvoir filtrer pour les autres listes.

Donc nous avons 2 fichiers : un fichier initial avec les listes vierges et un fichier qui réceptionne et traite la requête de mise à jour.
J'ai l'habitude d'échanger les données en xml donc je les renvoie au format xml et jQuery parcourt la réponse et fait les modifications nécessaires.

Voici le fichier initial :

Code:

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
<script type="application/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="application/javascript">
   function filterLists() {
      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();
      $.ajax({
         type: 'POST',
         url: 'shortTest.php',
         data: 'examen='+exam+'&annee='+annee+'&session='+session+'&theme='+theme,
         dataType: 'xml',
         cache: false,
         success: function(response) {
            var code;
            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);
         }
      });
   }
</script>
 
<?php
   /*
    * INITIALISATION DES LISTES DE SELECTION
    * à l'initialisation il faut afficher toutes les données disponibles dans chaque liste sans aucun critère comme si
    * elles étaient seules. Après la 1ère sélection, on filtrera les données des listes non encore sélectionnées
    */
   # ex : SELECT DISTINCT Examen FROM examen ORDER BY Examen;
   $exams    = array('BEP', 'BTS', 'LICENCE', 'MASTER');
   # ex : SELECT DISTINCT Annee FROM examen ORDER BY Annee;
   $annees   = array(2005, 2006, 2007, 2008, 2009, 2010, 2011);
   # ex : SELECT DISTINCT Session FROM examen ORDER BY Session;
   $sessions = array(1 => '01-janvier', 3 => '03-mars', 6 => '06-juin', 9 => '09-septembre');
   # ex : SELECT DISTINCT Contenu FROM examen ORDER BY Contenu;
   $themes   = array('math', 'chimie', 'bio');
 
   # pour chaque liste il faut prévoir leur retrait du filtre en insérant une ligne vide en début de liste
?>
 
<p><strong>Annales examens</strong></p>
<p>Sélectionnez de un à plusieurs critères de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche">
   <select id="sel_exams" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($exams as $exam): ?>
      <option value="<?php echo $exam; ?>"><?php echo $exam; ?></option>
      <?php endforeach; ?>
   </select>
   <select id="sel_annees" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($annees as $annee): ?>
      <option value="<?php echo $annee; ?>"><?php echo $annee; ?></option>
      <?php endforeach; ?>
   </select>
   <select id="sel_sessions" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($sessions as $id => $session): ?>
      <option value="<?php echo $id; ?>"><?php echo $session; ?></option>
      <?php endforeach; ?>
   </select>
   <select id="sel_themes" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($themes as $theme): ?>
      <option value="<?php echo $theme; ?>"><?php echo $theme; ?></option>
      <?php endforeach; ?>
   </select>
</form>

Voici le script qui traite les mises à jour :

Code:

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
<?php
 
# suivi du critère
$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']))) {
   $examen  = $_POST['examen'];
   $where[] = 'examen = "' . mysql_escape_string($examen) . '"';
}
# 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']))) {
   $session = $_POST['session'];
   $where[] = 'session = "' . mysql_escape_string($session) . '"';
}
# theme
if (isset($_POST['contenu']) && (strlen($_POST['contenu']))) {
   $theme = $_POST['contenu'];
   $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);
 
// si l'examen n'a pas déjà été sélectionné -> filtrage
if (NULL === $examen) {
   $sql = "SELECT DISTINCT Examen FROM examen $where ORDER BY Examen;";
   // connexion et extraction des données -> $exams = array()
   // 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();
}
 
// si l'année n'a pas déjà été sélectionnée -> filtrage
if (NULL === $annee) {
   $sql = "SELECT DISTINCT Annee FROM examen $where ORDER BY Annee;";
   // connexion et extraction des données -> $annees = array()
   // 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();
}
 
// si la session n'a pas déjà été sélectionnée -> filtrage
if (NULL === $session) {
   $sql = "SELECT DISTINCT Session FROM examen $where ORDER BY Session;";
   // connexion et extraction des données -> $session = array(id => session)
   // 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();
}
 
// si le theme n'a pas déjà été sélectionné -> filtrage
if (NULL === $theme) {
   $sql = "SELECT DISTINCT Contenu FROM examen $where ORDER BY Contenu;";
   // connexion et extraction des données -> $themes = array()
   // 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();
}
 
header('content-type: text/xml');
echo $xml->asXML();
 
?>

~~En espérant avoir filé un coup de main ;)~~

31/08/2011, 13h28
Invité

Citation:

Envoyé par rawsrc

je me permets de me mêler de la conversation ...

Ton expertise est toujours bienvenue.

Ton code me confirme que Jquery est vraiment plus facile à utiliser et très clair dans son écriture.

Et ta gestion du $where est plus élégante que la mienne ...
31/08/2011, 14h13
Kaamo

Je suis d'accord, je n'avais jamais pensé à implode() 8O
Sympa l'astuce :ccool:
31/08/2011, 14h54
CinePhil

Merci pour ta réponse rawsrc mais, autant je suis arrivé à comprendre le fonctionnement du script de jreaux62, autant avec le tien, j'ai l'impression de déchiffrer de l'italien ou de l'espagnol : il y a des mots et des bouts de phrases que je comprends, d'autres qui m'échappent et des tournures de phrases qui me laissent très dubitatif quant à la compréhension de l'ensemble ! :oops:

Comme dit dans mon premier message, je découvre Ajax. J'ajoute que je suis aussi un noob en Javascript ! :mrgreen: Alors une petite explication de texte du Javascript/Ajax me serait fort utile, si ce n'est pas trop demander.

En attendant, je crois que je vais tester mon idée émise hier soir après l'intervention de jreaux62.

Citation:

Envoyé par CinePhil

J'ajoute que je suis aussi un noob en Javascript ! :mrgreen: Alors une petite explication de texte du Javascript/Ajax me serait fort utile, si ce n'est pas trop demander.

Allez c'est parti.
L'utilisation de jQuery fait que tu n'as plus à t'occuper du camboui de JS et accessoirement de la gestion de l'ajax, il s'occupe de tout et fait presque le café.
En ayant les bases du javascript, il n'y a qu'à lire un peu la doc de jQuery pour s'en sortir.

Le traitement des appels ajax et le remplacement du contenu des listes liées est réalisé que par cette unique fonction (que je m'empresse de commenter) :

Code:

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
<script type="application/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.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 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: 'shortTest.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);
         }
      });
   }
</script>

Données initiales d'exemple :

Code:

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
<?php
   /**
    * INITIALISATION DES LISTES DE SELECTION
    * à l'initialisation il faut afficher toutes les données disponibles dans chaque liste sans aucun critère comme si
    * elles étaient seules. Après la 1ère sélection, on filtrera les données des listes non encore sélectionnées
    */
   // je t'ai mis les chaines sql qui correspondraient à ton cas
   // mais vu que je n'ai aucune donnée réellement, je m'en suis créé des bidons histoire d'avoir un support de travail plus visuel d'où les tableaux $exams, $annees, $sessions, $themes
   // ex : SELECT DISTINCT Examen FROM examen ORDER BY Examen;
   $exams    = array('BEP', 'BTS', 'LICENCE', 'MASTER');
   // ex : SELECT DISTINCT Annee FROM examen ORDER BY Annee;
   $annees   = array(2005, 2006, 2007, 2008, 2009, 2010, 2011);
   // ex : SELECT DISTINCT Session FROM examen ORDER BY Session;
   $sessions = array(1 => '01-janvier', 3 => '03-mars', 6 => '06-juin', 9 => '09-septembre');
   // ex : SELECT DISTINCT Contenu FROM examen ORDER BY Contenu;
   $themes   = array('math', 'chimie', 'bio');
 
   // pour chaque liste il faut prévoir leur retrait du filtre en insérant une ligne vide en début de liste
?>
 
<p><strong>Annales examens</strong></p>
<p>Sélectionnez de un à plusieurs critères de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche">
   <!-- Liste des examens -->
   <select id="sel_exams" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($exams as $exam): ?>
      <option value="<?php echo $exam; ?>"><?php echo $exam; ?></option>
      <?php endforeach; ?>
   </select>
   <!-- Liste des années -->
   <select id="sel_annees" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($annees as $annee): ?>
      <option value="<?php echo $annee; ?>"><?php echo $annee; ?></option>
      <?php endforeach; ?>
   </select>
   <!-- Liste des session -->
   <select id="sel_sessions" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($sessions as $id => $session): ?>
      <option value="<?php echo $id; ?>"><?php echo $session; ?></option>
      <?php endforeach; ?>
   </select>
   <!-- Liste des themes (suivant ton exemple cela correspond à Contenu) -->
   <select id="sel_themes" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($themes as $theme): ?>
      <option value="<?php echo $theme; ?>"><?php echo $theme; ?></option>
      <?php endforeach; ?>
   </select>
</form>

Maintenant au tour du script traitant les les requêtes ajax correspondant aux listes liées :
J'ai défini par convention que les nouvelles données des listes liées seront renvoyées au navigateur au format xml :

Code:

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<xml>
   <exams></exams>
   <annees></annees>
   <sessions></session>
   <themes></themes>
</xml>

Chaque noeud correspond aux données d'une liste et est susceptible de contenir du code HTML du genre :

Code:

1
2
3
<option value=""></option>
<option value="value1">value1</option>
...

Premièrement: :
Le script vérifie les données sélectionnées pour chaque liste afin de créer le filtre where.
Les listes qui sont sans sélection, seront mises à jour en fonction des critères des listes voisines.

Deuxièmement :
Comme toujours n'ayant aucune données, je t'ai mis la chaine sql correspondant à ton modèle d'exemple (variable $sql) et j'ai simulé un retour de données de la base afin de pouvoir montrer l'alimentation du résultat xml.

Troisièmement :
Une fois toutes les données des listes sans sélection filtrées et assemblées, je les renvoies au navigateur en ayant au préalabale envoyé l'en-tête qui va bien.

Et zou, un converti un :lol:
Alors ~~heureux~~ c'est plus clair maintenant ?

Merci rawsc, je comprends mieux comment ça doit fonctionner... sauf que mon adaptation de ton code ne fonctionne pas. :cry:

index1.php :

Code:

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
<script type="application/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 
<script type="text/javascript">
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
</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">
 
<?php
require("listeschoix.php");
?>
 
</form>
<?php 
include "bas.php";
?>

Je passe sur le programme listechoix qui construit les listes d'origine car elles sont correctement construites avec toutes les valeurs nécessaires.

majlistes.php :

Code:

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
# suivi du critère
$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']))) 
{
    $examen  = $_POST['examen'];
    $where[] = 'Examen = "' . mysql_escape_string($examen) . '"';
}
# 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']))) 
{
    $session = $_POST['session'];
    $where[] = 'Session = "' . mysql_escape_string($session) . '"';
}
# theme
if (isset($_POST['theme']) && (strlen($_POST['theme']))) 
{
    $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
mysql_query("SET NAMES 'utf8' ");
 
// si l'examen n'a pas déjà été sélectionné -> filtrage
if (NULL === $examen) 
{
    $sql = "
        SELECT DISTINCT Examen 
        FROM examen 
        $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="">-- Dipl&ocirc;me --</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) 
 
// idem pour les autres listes
 
header('content-type: text/xml');
echo $xml->asXML();
?>

Les listes ne se filtrent pas mutuellement, j'ai toujours toutes les valeurs dans toutes les listes.

Eh bonsoir,

Mon exemple fonctionne bien mieux une fois corrigé une faute de syntaxe de ma part : j'ai oublié le # pour le sélecteur de jQuery dans cette partie de code.
A ma décharge, j'ai utilisé le notepad sans tester, mais bon pas d'excuses qui tiennent, ça mérite :sm:
Code:

1 2 3 4 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);
Je tiens à votre dispostion, à toutes fin utiles, une base de données exemple (mysql) et tout le code qui gère les listes liées. Base de données totalement inspirée de votre problématique.

Si intéressé, je publie :ccool:

05/09/2011, 14h07
CinePhil

Merci.
J'ai eu du mal à le faire fonctionner mais j'y suis arrivé.

J'étais embêté par le fait que la première ligne de mes listes contenait en quelque sorte le titre du contenu de la liste (--Diplôme--, --Année-- ...). Je pensais que ce qui était récupéré par Jquery était le paramètre value de l'option mais ce n'est pas le cas ? C'est ce qu'il y a entre <option> et </option> ?

Merci rawsrc pour votre exemple
J’ai essaye d'adapter votre code sur mon besoin
J’ai une liste des projets, chaque projet possède des thèmes et des rondes
alors lorsque je choisi un projet il va me filtrer la liste des rondes et des projets selon mon choix
mais malheuresement ca marche pas

Code:

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
<?php
 
# suivi du critère
$where   = array();
$data    = array();
# données sélectionnées
$projet  = NULL;
$ronde   = NULL;
$theme   = NULL;
 
# résultat à envoyer
/**
 * @var SimpleXMLElement
 */
$xml = simplexml_load_string('<?xml version="1.0" encoding="utf-8"?><xml></xml>');
 
# projet
if (isset($_POST['projet']) && (strlen($_POST['projet']))) {
   $projet  = $_POST['projet'];
   $where[] = 'id_projet = "' . mysql_escape_string($projet) . '"';
}
 
 
/* FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ) */
$where = (empty($where)) ? NULL : 'WHERE ' . implode(' AND ', $where);
 
 
// si la ronde n'a pas déjà été sélectionnée -> filtrage
if (NULL === $ronde) {
   $sql = "SELECT * from ronde $where;";
   	while($res=mysql_fetch_array($sql))
		$rondes[$res['id_ronde']] = $res['num'];
   // connexion et extraction des données -> $ronde = array()
   // mise en forme des données
   $data[] = '<option value=""></option>'; # ligne vide
   foreach($rondes as $key => $value) {
      $data[] = '<option value="' . $key . '">' . $value . '</option>';
   }
   $xml->addChild('ronde', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
   $data = array();
}
 
// si le theme n'a pas déjà été sélectionné -> filtrage
if (NULL === $theme) {
   $sql = "SELECT * from theme $where;";
   while($res=mysql_fetch_array($sql))
		$themes[$res['id_theme']] = $res['desc_fr'];
   // connexion et extraction des données -> $themes = array()
   // mise en forme des données
   $data[] = '<option value=""></option>'; # ligne vide
   foreach($themes as $key => $value) {
      $data[] = '<option value="' . $key . '">' . $value . '</option>';
   }
   $xml->addChild('theme', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
   $data = array();
}
 
header('content-type: text/xml');
echo $xml->asXML();
 
?>

Code:

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
<?php include("connexion.php");
?>
<script type="application/javascript" charset="utf-8" src="jquery-1.6.2.min.js"></script>
<script type="application/javascript">
   function filterLists() {
      var projet  = $('#sel_projet option:selected').val();
      var ronde   = $('#sel_ronde option:selected').val();
      var theme   = $('#sel_theme option:selected').val();
      $.ajax({
         type: 'POST',
         url: 'shortTest.php',
         data: 'projet='+projet+'&ronde='+ronde+'&theme='+theme,
         dataType: 'xml',
         cache: false,
         success: function(response) {
            var code;
            if ((code = $(response).find('ronde').text()).length)   {alert('zied');$('#sel_ronde').html(code);}
            if ((code = $(response).find('theme').text()).length)   $('#sel_theme').html(code);
         }
      });
   }
</script>
 
<?php
   /*
    * INITIALISATION DES LISTES DE SELECTION
    * à l'initialisation il faut afficher toutes les données disponibles dans chaque liste sans aucun critère comme si
    * elles étaient seules. Après la 1ère sélection, on filtrera les données des listes non encore sélectionnées
    */
 
   	$req=mysql_query("SELECT * FROM projet");
	while($res=mysql_fetch_array($req))
		$projet[$res['id_projet']] = $res['desc_fr'];
 
   # pour chaque liste il faut prévoir leur retrait du filtre en insérant une ligne vide en début de liste
?>
 
<p><strong>Annales examens</strong></p>
<p>Sélectionnez de un à plusieurs critères de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche">
   <select id="sel_projet" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($projet as $key => $value): ?>
      <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
      <?php endforeach; ?>
   </select>
   <select id="sel_ronde">
      <option value=""></option>
   </select>
   <select id="sel_theme">
      <option value=""></option>
   </select>
</form>

Code:

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
CREATE TABLE IF NOT EXISTS `projet` (
  `id_projet` int(4) NOT NULL AUTO_INCREMENT,
  `desc_fr` varchar(100) NOT NULL,
  PRIMARY KEY (`id_projet`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;
 
--
-- Contenu de la table `projet`
--
 
INSERT INTO `projet` (`id_projet`, `desc_fr`) VALUES
(1, 'Projet A'),
(2, 'Projet B'),
(3, 'Projet C');
 
-- --------------------------------------------------------
 
--
-- Structure de la table `ronde`
--
 
CREATE TABLE IF NOT EXISTS `ronde` (
  `id_ronde` int(10) NOT NULL AUTO_INCREMENT,
  `num` varchar(8) NOT NULL,
  `id_projet` int(4) NOT NULL,
  PRIMARY KEY (`id_ronde`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
 
--
-- Contenu de la table `ronde`
--
 
INSERT INTO `ronde` (`id_ronde`, `num`, `id_projet`) VALUES
(1, '1', 1),
(2, '2', 1),
(3, '3', 1),
(4, '4', 1),
(5, '1', 2),
(6, '5', 1);
 
-- --------------------------------------------------------
 
--
-- Structure de la table `theme`
--
 
CREATE TABLE IF NOT EXISTS `theme` (
  `id_theme` int(4) NOT NULL AUTO_INCREMENT,
  `desc_fr` varchar(200) NOT NULL,
  `id_projet` int(4) NOT NULL,
  PRIMARY KEY (`id_theme`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=12 ;
 
--
-- Contenu de la table `theme`
--
 
INSERT INTO `theme` (`id_theme`, `desc_fr`, `id_projet`) VALUES
(1, 'theme1', 1),
(2, 'theme2', 1),
(3, 'theme3', 1),
(4, 'theme4', 1),
(5, 'theme5', 1),
(6, 'theme1', 2),
(7, 'theme2', 2),
(8, 'theme3', 2),
(9, 'theme4', 2),
(10, 'theme10', 3),
(11, 'theme11', 3);

est ce que vous pouvez m'aider et merci d'avance

06/09/2011, 14h39
CinePhil

Tu as adapté les requêtes SQL mais tu ne les a pas envoyées au serveur !
Il te manque le mysql_query.

Regarde mon code dans majlistes.php mais laisse bien la première option totalement vide, contrairement à ce que j'avais fait et qui figure encore dans le code que j'ai posté.

De plus, puisque tes identifiants sont numériques, ne fait pas un strlen mais un ctype_digit("{$res['num']}"). De même, dans la requête SQL, n'utilise pas mysql_escape_string pour des entiers mais intval et ne mets pas ces entiers entre apostrophes.
06/09/2011, 16h32
elmanu13

Bonjour à tous,

Merci pour ces exemples, c'est en partie ce que je recherchais, particulièrement l'exemple de 4 listes de Jérôme.
J'ai donc copié ses codes pour les tester, et ça fonctionne mais...ce n'est pas dynamique !
Je m'explique :
-si je fais un choix dans la liste 1, ma liste 2 se modifie et affiche bien ce que j'ai mis dans listeslieesAjax-liste2.php
-par contre, si je REFAIS un nouveau choix dans cette même liste 1, rien ne change dans la liste 2 !

Est-ce normal ?

Merci d'avance pour votre aide
06/09/2011, 17h47
Invité

Bonjour,
@elmanu13 : ouvre une autre discussion, stp.
Sinon, on risque de faire des tirs croisés, et ne plus rien comprendre.

[Edit] ok, pour ~~Scully~~ elmanu13 et ceux que ca intéresse aussi : "la réponse est ailleurs".

Citation:

Envoyé par CinePhil

Tu as adapté les requêtes SQL mais tu ne les a pas envoyées au serveur !
Il te manque le mysql_query.

Regarde mon code dans majlistes.php mais laisse bien la première option totalement vide, contrairement à ce que j'avais fait et qui figure encore dans le code que j'ai posté.

De plus, puisque tes identifiants sont numériques, ne fait pas un strlen mais un ctype_digit("{$res['num']}"). De même, dans la requête SQL, n'utilise pas mysql_escape_string pour des entiers mais intval et ne mets pas ces entiers entre apostrophes.

Bonjour Merci pour votre reponse
j'ai fait comme vous avez dit

Code:

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
<?php include("connexion.php");
mysql_query("SET NAMES 'utf8'");
?>
<script type="application/javascript" charset="utf-8" src="jquery-1.6.2.min.js"></script>
<script type="application/javascript">
   function filterLists() {
      var projet  = $('#sel_projet option:selected').val();
      var ronde   = $('#sel_ronde option:selected').val();
      var theme   = $('#sel_theme option:selected').val();
      $.ajax({
         type: 'POST',
         url: 'shortTest.php',
         data: 'projet='+projet+'&ronde='+ronde+'&theme='+theme,
         dataType: 'xml',
         cache: false,
         success: function(response) {
            var code;
            if ((code = $(response).find('ronde').text()).length)   {alert('zied');$('#sel_ronde').html(code);}
            if ((code = $(response).find('theme').text()).length)   $('#sel_theme').html(code);
         }
      });
   }
</script>
 
<?php
   /*
    * INITIALISATION DES LISTES DE SELECTION
    * à l'initialisation il faut afficher toutes les données disponibles dans chaque liste sans aucun critère comme si
    * elles étaient seules. Après la 1ère sélection, on filtrera les données des listes non encore sélectionnées
    */
 
   	$req=mysql_query("SELECT * FROM projet");
	while($res=mysql_fetch_array($req))
		$projet[$res['id_projet']] = $res['desc_fr'];
 
   # pour chaque liste il faut prévoir leur retrait du filtre en insérant une ligne vide en début de liste
?>
 
<p><strong>Annales examens</strong></p>
<p>Sélectionnez de un à plusieurs critères de recherche et cliquez sur le bouton "Chercher".</p>
<hr />
<form id="form_recherche">
   <select id="sel_projet" onchange="filterLists();">
      <option value=""></option>
      <?php foreach($projet as $key => $value): ?>
      <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
      <?php endforeach; ?>
   </select>
   <select id="sel_ronde">
      <option value=""></option>
   </select>
   <select id="sel_theme">
      <option value=""></option>
   </select>
</form>

Code:

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
<?php
 
# suivi du critère
$where   = array();
$data    = array();
# données sélectionnées
$projet  = NULL;
$ronde   = NULL;
$theme   = NULL;
 
# résultat à envoyer
/**
 * @var SimpleXMLElement
 */
$xml = simplexml_load_string('<?xml version="1.0" encoding="utf-8"?><xml></xml>');
 
# projet
if (isset($_POST['projet'])) {
   $projet  = $_POST['projet'];
   $where[] = 'id_projet = "' .projet. '"';
}
 
 
/* FILTRAGE DES DONNÉES DES LISTES (SSI RIEN N'A DÉJÀ ÉTÉ SÉLECTIONNÉ) */
$where = (empty($where)) ? NULL : 'WHERE ' . implode(' AND ', $where);
 
 
// si la ronde n'a pas déjà été sélectionnée -> filtrage
if (NULL === $ronde) {
   $sql = "SELECT * from ronde $where;";
   $req=mysql_query($sql);
   	while($res=mysql_fetch_array($req))
		$rondes[$res['id_ronde']] = $res['num'];
   // connexion et extraction des données -> $ronde = array()
   // mise en forme des données
   $data[] = '<option value=""></option>'; # ligne vide
   foreach($rondes as $key => $value) {
      $data[] = '<option value="' . $key . '">' . $value . '</option>';
   }
   $xml->addChild('ronde', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
   $data = array();
}
 
// si le theme n'a pas déjà été sélectionné -> filtrage
if (NULL === $theme) {
   $sql = "SELECT * from theme $where;";
   $req=mysql_query($sql);
   	while($res=mysql_fetch_array($req))
		$themes[$res['id_theme']] = $res['desc_fr'];
   // connexion et extraction des données -> $themes = array()
   // mise en forme des données
   $data[] = '<option value=""></option>'; # ligne vide
   foreach($themes as $key => $value) {
      $data[] = '<option value="' . $key . '">' . $value . '</option>';
   }
   $xml->addChild('theme', implode("\n", $data)); # noeud attendu par jQuery dans filterLists()
   $data = array();
}
 
header('content-type: text/xml');
echo $xml->asXML();
 
?>

mais le probleme existe encore le formualire ne marche pas :(

08/09/2011, 19h06
Invité

Citation:

Envoyé par zied86

le formulaire ne marche pas :(

Bonjour, pour citer Cirano : "c'est un peu court !" (comme explication)

As-tu mis des alert('...'); dans le javascript ?
des echo '...'; ou var_dump() dans le php ?

Ca te/nous permettrait au moins de savoir où ça coince, non ?
11/09/2011, 11h16
rawsrc

Bonjour,

Dans le cadre de cette discussion et histoire de dépanner certains, j'ai publié un tutorial sur mon blog dvp concernant les listes liées : voir ici.
Ce tutorial fournit une approche parmi d'autres (on verra plus tard les autres approches avec l'aide d'autres rédacteurs).
19/09/2011, 11h17
CinePhil

Je viens de détecter un souci avec ce code de listes liées en testant l'appli. :(

Si l'utilisateur fait une sélection dans une liste, affiche un résultat puis veut faire une sélection différente en remettant une liste à la valeur vide puis en choisissant une autre valeur dans cette liste ou une autre, toutes les autres listes se vident et bien sûr aucun résultat n'est affiché.

Euh... un peu compliquée mon explication ?

Je détaille...
1) L'utilisateur choisit "Antilles" dans la liste "Session".
=> La liste des diplômes s'est réduite à 3 éléments
2) L'utilisateur clique sur le bouton "Chercher"
=> Le tableau de résultats est affiché, les listes sont remplies totalement et la liste "Session" affiche la sélection de l'utilisateur : "Antilles".
Jusque là, tout va bien.
3) Ne trouvant pas ce qu'il cherche, l'utilisateur annule sa sélection dans la liste "Session" en y choisissant la ligne blanche.
=> Toutes les listes sont complètes, tout va bien !
4) Il choisit maintenant "Réunion" dans la même liste "Session".
=> Toutes les autres listes se vident et un clic sur le bouton Chercher n'affiche aucun résultat alors qu'il y a effectivement des données pour la Réunion ! :aie:

Je vais essayer d'analyser ce qui se passe au niveau du code mais si quelqu'un a une idée avant moi, il est le bienvenu !
19/09/2011, 18h13
rawsrc

Citation:

Envoyé par CinePhil

3) Ne trouvant pas ce qu'il cherche, l'utilisateur annule sa sélection dans la liste "Session" en y choisissant la ligne blanche.
=> Toutes les listes sont complètes, tout va bien !
4) Il choisit maintenant "Réunion" dans la même liste "Session".
=> Toutes les autres listes se vident et un clic sur le bouton Chercher n'affiche aucun résultat alors qu'il y a effectivement des données pour la Réunion ! :aie:

Bah écoutes, il faudrait que tu postes ton code parce que le fait d'annuler un filtre en sélectionnant la ligne vide et ensuite sélectionner une autre valeur de la même liste devrait normalement te ramener au 1. de tes étapes.
Sur le tuto que j'ai posté, je n'ai pas cet os.

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

Dans index1.php :

Code:

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:

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:

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:

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);
 
?>

21/09/2011, 11h56
rawsrc

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.
21/09/2011, 14h23
CinePhil

Bonjour

Citation:

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... :?

Citation:

- 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 !

Citation:

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.

Citation:

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 ?