Actualiser menu deroulant en fonction d'autres menus
Résolu/Fermé
salecoune
Messages postés
47
Date d'inscription
vendredi 30 septembre 2011
Statut
Membre
Dernière intervention
13 juillet 2016
-
28 août 2014 à 22:22
salecoune Messages postés 47 Date d'inscription vendredi 30 septembre 2011 Statut Membre Dernière intervention 13 juillet 2016 - 9 sept. 2014 à 00:41
salecoune Messages postés 47 Date d'inscription vendredi 30 septembre 2011 Statut Membre Dernière intervention 13 juillet 2016 - 9 sept. 2014 à 00:41
A voir également:
- Actualiser menu deroulant en fonction d'autres menus
- Menu déroulant excel - Guide
- Fonction si et - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Windows 11 menu démarrer classique - Guide
4 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
29 août 2014 à 09:26
29 août 2014 à 09:26
Salut,
Le problème vient de ton code javascript. La condition if(val1 != "" && val2 != "" && val3 != "") et la requête ajax qui suit n'est exécutée qu'une seule fois au chargement de ta page.
Il faudrait que cette condition soit vérifiée à chaque changement de valeurs d'un des 3 select, en utilisant par exemple une fonction appelée à chaque onChange :
On peut factoriser un peu ton code sur les fonctions onChange qui font presque toutes la même chose : récupérer une données et appeler updateMatieres().
Si on déplace la récupération des données dans la fonction updateMatieres, on peut alors facilement factoriser les onChange :
PS : contrairement à PHP, on ne met normalement pas de $ devant les noms de variable ;)
Bonne journée
Le problème vient de ton code javascript. La condition if(val1 != "" && val2 != "" && val3 != "") et la requête ajax qui suit n'est exécutée qu'une seule fois au chargement de ta page.
Il faudrait que cette condition soit vérifiée à chaque changement de valeurs d'un des 3 select, en utilisant par exemple une fonction appelée à chaque onChange :
// on initialise chaque variable correspondant chacune à un menu deroulant var $matiere = $('#matiere'); var $depart = $('#depart'); var $annee = $('#annee'); var $semestre = $('#semestre'); // à la sélection d'une option dans chaque menu deroulant $depart.on('change', function() { var val1 = $(this).val(); // on récupère la valeur du departement updateMatieres(); } $annee.on('change', function() { var val2 = $(this).val(); // on récupère la valeur de l'année updateMatieres(); } $semestre.on('change', function() { var val3 = $(this).val(); // on récupère la valeur du semestre updateMatieres(); } function updateMatieres() { if(val1 != "" && val2 != "" && val3 != "") { $matiere.empty(); // on vide la liste des matieres $.ajax({ url: 'Matieres.php', data: {depart: val1, annee: val2, semestre: val3}, // on envoie les données en GET à matiere.php qui va recupérer les matieres correspondantes dataType: 'json', success: function(json) { $.each(json, function(index, value) { $matiere.append('<option value="'+ index +'">'+ value +'</option>'); // on remplie le menu deroulant des matieres grace au tableau retourné par Matieres.php }); } }); } }
On peut factoriser un peu ton code sur les fonctions onChange qui font presque toutes la même chose : récupérer une données et appeler updateMatieres().
Si on déplace la récupération des données dans la fonction updateMatieres, on peut alors facilement factoriser les onChange :
// on initialise chaque variable correspondant chacune à un menu deroulant var $matiere = $('#matiere'); // à la sélection d'une option dans chaque menu deroulant $('#depart, #annee, #semestre').on('change', function() { updateMatieres(); } function updateMatieres() { var val1 = $('#depart').val(); var val2 = $('#annee').val(); var val3 = $('#semestre').val(); if(val1 != "" && val2 != "" && val3 != "") { $matiere.empty(); // on vide la liste des matieres $.ajax({ url: 'Matieres.php', data: {depart: val1, annee: val2, semestre: val3}, // on envoie les données en GET à matiere.php qui va recupérer les matieres correspondantes dataType: 'json', success: function(json) { $.each(json, function(index, value) { $matiere.append('<option value="'+ index +'">'+ value +'</option>'); // on remplie le menu deroulant des matieres grace au tableau retourné par Matieres.php }); } }); } }
PS : contrairement à PHP, on ne met normalement pas de $ devant les noms de variable ;)
Bonne journée
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
Modifié par Pitet le 30/08/2014 à 15:31
Modifié par Pitet le 30/08/2014 à 15:31
Tu as une petite erreur sur la construction de ton tableau $json :
ton tableau a 2 dimensions, donc en parcourant le tableau $json tu récupères un tableau au lieu de récupérer directement la valeur 'lib_mat' : c'est sans incidence ici puisque javascript te retourne la valeur du premier élément automatiquement, ce qui n'est pas le cas avec php. Un parcours identique du tableau en php afficherais donc 'Array' au lieu de 'lib_mat'.
Pour corriger, une seule dimension à ton suffit :
htmlentities() est inutile avant une requête sql (c'est pour les failles xss). Contre les injections sql, il faudrait utiliser les requêtes préparées ou la méthode quote() de PDO mais ce n'est pas forcément nécessaire puisque tu appliques déjà intval sur tes données : un entier ne contient pas de caractères spéciaux sql dons intval seul suffit.
Ces deux points sont sans réelles incidences et le reste de ton code semble correct, l'erreur vient donc surement de ta requête sql.
Affiche ta requête :
et appelle directement l'url http://localhost/monprojet/Matieres.php?depart=1&annee=2014&semestre=3
Copie et exécute ta requête dans phpmyadmin pour vérifier si tu as des résultats.
$json[$num][] = utf8_encode($donnees['LIB_MAT']); // ce qui donne : // $json[0][0] = 'lib_mat1'; // $json[1][0] = 'lib_mat1'; // $json[2][0] = 'lib_mat1'; // ...
ton tableau a 2 dimensions, donc en parcourant le tableau $json tu récupères un tableau au lieu de récupérer directement la valeur 'lib_mat' : c'est sans incidence ici puisque javascript te retourne la valeur du premier élément automatiquement, ce qui n'est pas le cas avec php. Un parcours identique du tableau en php afficherais donc 'Array' au lieu de 'lib_mat'.
Pour corriger, une seule dimension à ton suffit :
$json[$num] = utf8_encode($donnees['LIB_MAT']); // ce qui donne : // $json[0] = 'lib_mat1'; // $json[1] = 'lib_mat1'; // $json[2] = 'lib_mat1';
htmlentities() est inutile avant une requête sql (c'est pour les failles xss). Contre les injections sql, il faudrait utiliser les requêtes préparées ou la méthode quote() de PDO mais ce n'est pas forcément nécessaire puisque tu appliques déjà intval sur tes données : un entier ne contient pas de caractères spéciaux sql dons intval seul suffit.
Ces deux points sont sans réelles incidences et le reste de ton code semble correct, l'erreur vient donc surement de ta requête sql.
Affiche ta requête :
$requete = "SELECT code_mat, lib_mat FROM matiere WHERE code_mat IN (SELECT code_mat FROM est_enseignee WHERE code_an =".$code_an." AND code_sem = ".$code_sem." AND code_depart = ".$code_depart.") ORDER BY lib_mat"; echo $requete;
et appelle directement l'url http://localhost/monprojet/Matieres.php?depart=1&annee=2014&semestre=3
Copie et exécute ta requête dans phpmyadmin pour vérifier si tu as des résultats.
salecoune
Messages postés
47
Date d'inscription
vendredi 30 septembre 2011
Statut
Membre
Dernière intervention
13 juillet 2016
9 sept. 2014 à 00:28
9 sept. 2014 à 00:28
Salut Pitet !
Je m'excuse pour cette réponse plus que tardive, j'étais partit en vacances et je n'ai pas eu le temps de coder lol
Alors en fait j'ai réussis à régler le problème en changeant juste la méthode pour faire la requête qui elle au finale reste strictement la même. Je ne comprend pas donc d'où venait réellement le problème qui faisait que l'ajax ne marchait pas mais du coup pour ceux qui aurait ce même problème je vais poster ce que j'ai finalement en code et qui marche.
En tous cas je te remercie vraiment pour ton aide précieuse qui m'a permis de bien avancer dans mon projet !
A bientôt peut-être si jamais on se recroise sur le forum :)
Je m'excuse pour cette réponse plus que tardive, j'étais partit en vacances et je n'ai pas eu le temps de coder lol
Alors en fait j'ai réussis à régler le problème en changeant juste la méthode pour faire la requête qui elle au finale reste strictement la même. Je ne comprend pas donc d'où venait réellement le problème qui faisait que l'ajax ne marchait pas mais du coup pour ceux qui aurait ce même problème je vais poster ce que j'ai finalement en code et qui marche.
En tous cas je te remercie vraiment pour ton aide précieuse qui m'a permis de bien avancer dans mon projet !
A bientôt peut-être si jamais on se recroise sur le forum :)
salecoune
Messages postés
47
Date d'inscription
vendredi 30 septembre 2011
Statut
Membre
Dernière intervention
13 juillet 2016
29 août 2014 à 08:24
29 août 2014 à 08:24
Petit up :p
salecoune
Messages postés
47
Date d'inscription
vendredi 30 septembre 2011
Statut
Membre
Dernière intervention
13 juillet 2016
9 sept. 2014 à 00:41
9 sept. 2014 à 00:41
Pour ceux qui voudraient creer un menu déroulant dont les infos s'affichent en fonction des infos choisies dans d'autres menus déroulant voici un exemple de code qui marche désormais par le biais jquery et ajax !
Attention cet exemple n'est pas "transportable" puisque les requêtes correspondent bien sur aux tables de ma base de données
Test.php
Matieres.php
Voila, n'hésitez pas si vous avez des questions :)
Attention cet exemple n'est pas "transportable" puisque les requêtes correspondent bien sur aux tables de ma base de données
Test.php
<!DOCTYPE html> <html> <head> <?php include("ConnexionBase.php"); ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body> <h2>Alimenter une liste jQuery et MySQL</h2> <form> <!-- on remplie le premier menu deroulant avec les departements--> <select name="depart" id="depart" class="form-control" <?php if (isset($_GET['validation_depart']) and !$_GET['validation_depart']) {echo 'style=\'border-color: red;\'';}?>> <!--On cree dynamiquement le menu deroulant en fonctions de donnees de la base de donnee--> <option value="">Departement</option> <?php $req = $db->prepare("select CODE_DEPART, LIB_DEPART from DEPARTEMENT"); $req->execute(); while ($departement = $req->fetch()) { if (isset($_GET['choix_depart']) and $_GET['choix_depart']==$departement["CODE_DEPART"]) { echo '<option value='.$departement["CODE_DEPART"].' selected>'.$departement["LIB_DEPART"].'</option><br>'; } else { echo '<option value='.$departement["CODE_DEPART"].'>'.$departement["LIB_DEPART"].'</option><br>'; /*<br> sert a faire un retour a la ligne*/ } } $req->closeCursor(); ?> </select> <br> <br> <!-- on remplie le deuxieme menu deroulant avec les années--> <select name="annee" id="annee" class="form-control" <?php if (isset($_GET['validation_annee']) and !$_GET['validation_annee']) {echo 'style=\'border-color: red;\'';}?> > <option value="">Annee</option> <?php $req ="SELECT code_an,lib_an FROM annee"; $res=$db->query($req); while ($annee = $res->fetch()) { if (isset($_GET['choix_annee']) and $_GET['choix_annee']==$annee['CODE_AN']) { echo '<option value='.$annee['CODE_AN'].' selected>'.$annee['LIB_AN'].'</option><br>'; } else { echo '<option value='.$annee['CODE_AN'].'>'.$annee['LIB_AN'].'</option><br>'; /*<br> sert a faire un retour a la ligne*/ } } $res->closeCursor(); ?> </select> <br> <br> <!-- on remplie le troisieme menu deroulant avec les semestres--> <select name="semestre" id="semestre" class="form-control" <?php if (isset($_GET['validation_sem']) and !$_GET['validation_sem']) {echo 'style=\'border-color: red;\'';}?> > <option value="">Semestre</option> <?php $req ="SELECT code_sem, lib_sem FROM semestre"; $res=$db->query($req); while ($semestre = $res->fetch()) { if (isset($_GET['choix_sem']) and $_GET['choix_sem']==$semestre['CODE_SEM']) { echo '<option value='.$semestre['CODE_SEM'].' selected>'.$semestre['LIB_SEM'].'</option><br>'; } else { echo '<option value='.$semestre['CODE_SEM'].'>'.$semestre['LIB_SEM'].'</option><br>'; /*<br> sert a faire un retour a la ligne*/ } } $res->closeCursor(); $db=null; ?> </select> <!-- ce dernier men va comporter les matieres en fonction des infos choisies dans les premiers menus--> <select name="matiere" id="matiere"> <option value="">Matieres</option> </select> </form> <script> var $matiere = $('#matiere'); function updateMatieres() { var val1 = $('#depart').val(); var val2 = $('#annee').val(); var val3 = $('#semestre').val(); if(val1 != "" && val2 != "" && val3 != "") { $matiere.empty(); // on vide la liste des matieres $.ajax({ url: 'Matieres.php', data: 'depart=' + val1 + '&annee=' + val2 + '&semestre=' + val3, //{depart: val1, annee: val2, semestre: val3}, on envoie les données en GET à matiere.php qui va recupérer les matieres correspondantes dataType: 'json', error: function(){document.write("lol")}, success: function(json) { $.each(json, function(index, value) { $matiere.append('<option value="'+ index +'">'+ value +'</option>'); // on remplie le menu deroulant des matieres grace au tableau retourné par Matieres.php }); } }); } } // à la sélection d'une option dans chaque menu deroulant $('#depart, #annee, #semestre').on('change', function() { updateMatieres(); }); </script> </body> </html>
Matieres.php
<?php if(isset($_GET['depart']) and isset($_GET['annee']) and isset($_GET['semestre'])) { // connexion à la base de données include("ConnexionBase.php"); $json = array(); $req = $db->prepare("SELECT code_mat,lib_mat FROM matiere WHERE code_mat IN (SELECT code_mat FROM est_enseignee WHERE code_an = :annee AND code_sem = :semestre AND code_depart = :depart) ORDER BY lib_mat"); $req->execute(array( 'annee' => $_GET['annee'], 'semestre' => $_GET['semestre'], 'depart' => $_GET['depart'] )); while ($matiere = $req->fetch(PDO::FETCH_ASSOC)) { $json[$matiere['CODE_MAT']] = utf8_encode($matiere['LIB_MAT']); } // envoi du résultat au success echo json_encode($json); } ?>
Voila, n'hésitez pas si vous avez des questions :)
30 août 2014 à 00:31
Malheureusement j'ai toujours un petit problème. Grâçe aux modifications que tu m'as dit de faire, j'ai maintenant bien le menu déroulant des matières qui se vide ($matiere.empty(); s'execute) lorsque je choisie une option dans les 3 autres menus. Mais par contre le menu des matières reste vide :/ . J'ai cherché pendant 2h d'où pouvait provenir le problème, j'ai trouvé quelques erreurs mais rien n'y fait après rectification ...
Pourrais-tu me venir en aide encore une fois s'il te plait :p
Voici ce que j'ai actuellement:
Test.php
Matieres.php
Merci d'avance ! :D