IdentifiantMot de passe
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Listes déroulantes liées


Sujet :

jQuery

  1. 16/11/2014, 14h23 #1
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut Listes déroulantes liées
    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.
    Répondre avec citation Répondre avec citation   0  0
  2. 17/11/2014, 11h05 #2
    freddou17
    freddou17 est déconnecté
    Membre chevronné Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Par défaut
    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); 
		...

    ++
    Répondre avec citation Répondre avec citation   0  0
  3. 17/11/2014, 22h29 #3
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut liste déroulante
    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.
    Répondre avec citation Répondre avec citation   0  0
  4. 18/11/2014, 23h53 #4
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut
    Personne pour me venir en aide?
    Répondre avec citation Répondre avec citation   0  0
  5. 19/11/2014, 10h27 #5
    freddou17
    freddou17 est déconnecté
    Membre chevronné Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Par défaut
    slt,

    ce n'est pas echo echo response mais console.log(response)!!! utilises tu firebug ou autre outils de dev??
    Répondre avec citation Répondre avec citation   0  0
  6. 19/11/2014, 15h55 #6
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut
    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.
    Répondre avec citation Répondre avec citation   0  0
  7. 20/11/2014, 00h40 #7
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut
    Je viens de mettre la commande pour afficher response mais rien ne s'affiche.
    Voici ce que j'ai mis:
    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
     
 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); 
			console.log(response);
		} 
	}); 
  }
    Ici se sera plus lisible.
    Répondre avec citation Répondre avec citation   0  0
  8. 20/11/2014, 10h25 #8
    freddou17
    freddou17 est déconnecté
    Membre chevronné Avatar de freddou17
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2013
    Messages
    341
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Sarthe (Pays de la Loire)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2013
    Messages : 341
    Par défaut
    Slt,

    met ton console.log juste après
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var code
    ou regarde dans firebug la response de ta requete ajax (onglet réseau + clic sur la requête concernée). Le javascript s'arrête dès qu'il rencontre une erreur.

    Peux tu m'expliquer tes if, car tu affectes une valeur à code et après quel est ton test ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
if ((code = $(response).find('clients').text()).length){
 $('#clients').html(code);
}
    Es tu sur de ton code php ?
    ++
    Répondre avec citation Répondre avec citation   0  0
  9. 25/11/2014, 17h32 #9
    seb221
    seb221 est déconnecté
    Membre averti
    Profil pro
    Inscrit en
    Février 2008
    Messages
    32
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 32
    Par défaut
    Bonjour,
    désolé un peu pris ces temps-ci, je me suis inspiré de cet exemple:
    http://blog.developpez.com/rawsrc/p1...ql_jquery_ajax
    Dont voici le code qui fonctionne très bien:
    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
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
     
<!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 jour    = $('#jours option:selected').val();
         var mois    = $('#mois option:selected').val();
         var annee   = $('#annees option:selected').val();
         var ville   = $('#villes option:selected').val();
         var matiere = $('#matieres 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: 'jour='+jour+'&mois='+mois+'&annee='+annee+'&ville='+ville+'&matiere='+matiere,   // 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('jours').text()).length)    $('#jours').html(code);
               if ((code = $(response).find('mois').text()).length)     $('#mois').html(code);
               if ((code = $(response).find('annees').text()).length)   $('#annees').html(code);
               if ((code = $(response).find('villes').text()).length)   $('#villes').html(code);
               if ((code = $(response).find('matieres').text()).length) $('#matieres').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    = 'root';
      $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
 
      // JOURS
      $sql = 'SELECT DISTINCT DAY(t_session.date_) FROM t_session ORDER BY DAY(t_session.date_);';
      $qry = mysql_query($sql);
      while($row = mysql_fetch_row($qry)) {
         $jours[] = $row[0];
      }
 
      // MOIS
      $sql = 'SELECT DISTINCT MONTH(t_session.date_) FROM t_session ORDER BY MONTH(t_session.date_);';
      $qry = mysql_query($sql);
      while($row = mysql_fetch_row($qry)) {
         $mois[] = $row[0];
      }
 
      // ANNEES
      $sql = 'SELECT DISTINCT YEAR(t_session.date_) FROM t_session ORDER BY YEAR(t_session.date_);';
      $qry = mysql_query($sql);
      while($row = mysql_fetch_row($qry)) {
         $annees[] = $row[0];
      }
 
      // VILLES
      $sql = 'SELECT DISTINCT t_ville.idVille, t_ville.ville FROM t_ville ORDER BY t_ville.ville;';
      $qry = mysql_query($sql);
      while($row = mysql_fetch_row($qry)) {
         $villes[$row[0]] = $row[1];
      }
 
      // MATIERES
      $sql = 'SELECT DISTINCT t_matiere.idMatiere, t_matiere.matiere FROM t_matiere ORDER BY t_matiere.matiere;';
      $qry = mysql_query($sql);
      while($row = mysql_fetch_row($qry)) {
         $matieres[$row[0]] = $row[1];
      }
 
      // DONNES DE LA TABLE
      $sql = <<<SQL
SELECT t_ville.ville, t_session.date_, t_matiere.matiere, t_session_matiere.nbInscrit
FROM t_session_matiere  
   INNER JOIN t_matiere ON t_session_matiere.idMatiere = t_matiere.idMatiere
   INNER JOIN t_session ON t_session_matiere.idSession = t_session.idSession
   INNER JOIN t_ville   ON t_session.idVille           = t_ville.idVille
ORDER BY
   t_ville.ville ASC,  
   t_session.date_ DESC,  
   t_matiere.matiere ASC;
SQL;
      $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>SESSIONS D'EXAMENS</strong></p>
   <p>Sélectionnez de un à plusieurs critères de recherche.</p>
   <form id="frmRecherche">
 
      <!-- Liste des jours -->
      <label for="jours">Jours</label>
      <select id="jours" onchange="filterLists();">
         <option value=""></option>
         <?php foreach($jours as$jour): ?>
         <option value="<?php echo $jour; ?>"><?php echo $jour; ?></option>
         <?php endforeach; ?>
      </select>
 
      <!-- Liste des mois -->
      <label for="mois">Mois</label>
      <select id="mois" onchange="filterLists();">
         <option value=""></option>
         <?php foreach($mois as $unMois): ?>
         <option value="<?php echo $unMois; ?>"><?php echo $unMois; ?></option>
         <?php endforeach; ?>
      </select>
 
      <!-- Liste des années -->
      <label for="annees">Années</label>
      <select id="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 villes -->
      <label for="villes">Villes</label>
      <select id="villes" onchange="filterLists();">
         <option value=""></option>
         <?php foreach($villes as $id => $ville): ?>
         <option value="<?php echo $id; ?>"><?php echo $ville; ?></option>
         <?php endforeach; ?>
      </select>
 
      <!-- Liste des matières -->
      <label for="matieres">Matières</label>
      <select id="matieres" onchange="filterLists();">
         <option value=""></option>
         <?php foreach($matieres as $id => $matiere): ?>
         <option value="<?php echo $id; ?>"><?php echo $matiere; ?></option>
         <?php endforeach; ?>
      </select>
   </form>
 
   <!-- Données de la table -->
   <table>
      <thead>
         <tr>
            <th>VILLES</th>
            <th>DATES</th>
            <th>MATIERES</th>
            <th>NB Inscrits</th>
         </tr>
      </thead>
 
      <tbody id="table">
      <?php foreach($data as $row): ?>
         <tr>
            <td><?php echo $row['ville']; ?></td>
            <td class="alignc"><?php echo $row['date_']; ?></td>
            <td><?php echo $row['matiere']; ?></td>
            <td class="alignr"><?php echo $row['nbInscrit']; ?></td>
         </tr>
      <?php endforeach; ?>
      </tbody>
   </table>
</body>
</html>
    et le filterlist
    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
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
     
<?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
$jour    = NULL;
$mois    = NULL;
$annee   = NULL;
$ville   = NULL;
$matiere = NULL;
 
/**
 * CE SCRIPT ANALYSE LES SELECTIONS ET RENVOIE DES DONNEES AU FORMAT XML  
 * La structure correspond à ce que jQuery attend pour mettre à jour la page
 * <?xml version="1.0" encoding="utf-8"?>  
 *    <xml>  
 *    <jours></jours>  
 *    <mois></mois>  
 *    <annees></annees>  
 *    <villes></villes>  
 *    <matieres></matieres>  
 *    <table></table>  
 * </xml>  
 *
 * @var SimpleXMLElement
 */
$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
 
// jour
if (isset($_POST['jour']) && (ctype_digit("{$_POST['jour']}"))) {
   $jour = $_POST['jour'];
   $where[] = 'DAY(t_session.date_) = ' . intval($jour);
}
 
//mois
if (isset($_POST['mois']) && (ctype_digit("{$_POST['mois']}"))) {
   $mois = $_POST['mois'];
   $where[] = 'MONTH(t_session.date_) = ' . intval($mois);
}
 
// année
if (isset($_POST['annee']) && (ctype_digit("{$_POST['annee']}"))) {
   $annee = $_POST['annee'];
   $where[] = 'YEAR(t_session.date_) = ' . intval($annee);
}
 
// villes
if (isset($_POST['ville']) && (ctype_digit("{$_POST['ville']}"))) {
   $ville = $_POST['ville'];
   $where[] = 't_session.idVille = ' . intval($ville);
}
 
// matière
if (isset($_POST['matiere']) && (ctype_digit("{$_POST['matiere']}"))) {
   $matiere = $_POST['matiere'];
   $where[] = 't_session_matiere.idMatiere = ' . intval($matiere);
}
 
### 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    = 'root';
$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
t_session_matiere  
   INNER JOIN t_matiere ON t_session_matiere.idMatiere = t_matiere.idMatiere
   INNER JOIN t_session ON t_session_matiere.idSession = t_session.idSession
   INNER JOIN t_ville   ON t_session.idVille           = t_ville.idVille
$where
SQL;
 
/**
 * Crée le code HTML pour les liste relatives aux dates : Jours Mois Années
 * @param mixed $sql
 * @return string
 */
function filtrageDates($sql) {
   $data = array();
   $qry  = mysql_query($sql);
   $data[] = '<option value=""></option>'; // ligne vide
   while($row = mysql_fetch_row($qry)) {
      $data[] = '<option value="' . $row[0] . '">' . $row[0] . '</option>';
   }
   return implode("\n", $data);
}
 
/**
 * Crée le code HTML pour les liste relatives aux villes et matières
 * @param mixed $sql
 * @return string
 */
function filtrageVillesMatieres($sql) {
   $data = array();
   $qry = mysql_query($sql);
   $data[] = '<option value=""></option>'; // ligne vide
   while($row = mysql_fetch_row($qry)) {
      $data[] = '<option value="' . $row[0] . '">' . $row[1] . '</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) ? 't_session' : $fromAndWhere;
 
// si le jour n'a pas déjà été sélectionné -> filtrage de la liste
if (NULL === $jour) {
   $sql = "SELECT DISTINCT DAY(t_session.date_) FROM $fromDates ORDER BY DAY(t_session.date_);";
   $xml->addChild('jours', filtrageDates($sql));
}
 
// si le mois n'a pas déjà été sélectionné -> filtrage de la liste
if (NULL === $mois) {
   $sql = "SELECT DISTINCT MONTH(t_session.date_) FROM $fromDates ORDER BY MONTH(t_session.date_);";
   $xml->addChild('mois', filtrageDates($sql));
}
 
// si l'année n'a pas déjà été sélectionnée -> filtrage de la liste
if (NULL === $annee) {
   $sql = "SELECT DISTINCT YEAR(t_session.date_) FROM $fromDates ORDER BY YEAR(t_session.date_);";
   $xml->addChild('annees', filtrageDates($sql));
   $data = array();
}
 
// si la ville n'a pas déjà été sélectionnée -> filtrage de la liste
if (NULL === $ville) {
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php)
   $from = (NULL === $where) ? 't_ville' : $fromAndWhere;
   $sql = "SELECT DISTINCT t_ville.idVille, t_ville.ville FROM $from ORDER BY t_ville.ville;";
   $xml->addChild('villes', filtrageVillesMatieres($sql));  
   $data = array();
}
 
// si la matière n'a pas déjà été sélectionnée -> filtrage de la liste
if (NULL === $matiere) {
   // si aucun where -> on repart sur l'extraction de toutes les données possibles (pareil qu'au 1er appel index.php)
   $from = (NULL === $where) ? 't_matiere' : $fromAndWhere;
   $sql = "SELECT DISTINCT t_matiere.idMatiere, t_matiere.matiere FROM $from ORDER BY t_matiere.matiere;";
   $xml->addChild('matieres', filtrageVillesMatieres($sql));
   $data = array();
}
 
 
// données de la table
$sql = <<<SQL
SELECT  
   t_ville.ville,  
   t_session.date_,  
   t_matiere.matiere,  
   t_session_matiere.nbInscrit  
FROM  
   $fromAndWhere
ORDER BY
   t_ville.ville ASC,  
   t_session.date_ DESC,  
   t_matiere.matiere ASC;
SQL;
 
$data = array();
$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['ville']}</td>
   <td class="alignc">{$row['date_']}</td>
   <td>{$row['matiere']}</td>
   <td class="alignr">{$row['nbInscrit']}</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();
 
?>
    Je ne vois pas la différence.
    Répondre avec citation Répondre avec citation   0  0
ActualitésF.A.Q JSTUTORIELS JSSOURCES JSEXERCICES JSLIVRES JSQUIZZ JS
« Discussion précédente | Discussion suivante »

Discussions similaires

  1. Debug script listes déroulantes liées
    Par AnTiX dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 20/04/2005, 13h03
  2. Griser 1 liste déroulante liée à une autre, pb de concaténat
    Par linou dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 29/03/2005, 17h45
  3. listes déroulantes liées
    Par k4eve dans le forum Struts 1
    Réponses: 3
    Dernier message: 26/04/2004, 16h11
  4. Listes déroulantes liées entre elles
    Par denisC dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 27/07/2002, 16h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo