Listes dynamiques liées

Question

Bonjour!
J'ai créé avec l'aide d'un site deux listes déroulante liées. Mais j'aimerais allé plus loin.
La 2ème liste est chargée en fonction de la 1ère. Je veux que 3 autres listes déroulantes soient chargées automatiquement en fonction de la 2ème.
Voici les codes:
[list]
Commune.php

cs_stay · Answer

Salut, tu connais la syntaxe des langages utilisés dans ton poste.
Donc, aucun intérêt de poster cela.
Si tu rencontres un problème, tu le postes, en l'occurrence, tu n'as posé aucune question.
Je te propose de prendre une feuille et un bic, et d'écrire dans un langage humain ce que l'application doit faire à chaque étape. Tu peux également créer un diagramme d'activité et un Wireframe, mais c'est pour le fun (uniquement utile en clientèle).
Par la suite, dans ton développement, tu auras des questions, si tu rencontres des problèmes.
C'est la seul méthode pour apprendre vite et bien.

J&#8217;espère que ce poste ta rendu service ?

stéph

JangotheCool · Answer

Bonjour à tous 
En claire, voici ce que je veux Stay:
Deux combo liés dynamiquement. C'est-à-dire le second combo sera rempli automatiquement sur changement d'un élément du premier combo.
3 autres combo seront remplis dynamiquement après changement d'un élément du deuxième combo.
Je sais que c'est possible avec jquery. Je n'est pas encore commencé par programmer en jquery. Aidez moi alors pas à pas avec jquery.
Merci d'avance!

cs_stay · Answer

Super, pour moi, il faut rester simple dans la méthode. Tu affiches dynamiquement les données après une sélection dans la ou les combobox. Un exemple avec jQuery en objet : [# envoyer] Aucun résultat Départements 1 est la bonne réponse Aucun résultat pour le "Départements 2" Ici, comme j'ai dit, tu affiches en rapport au résultat reçus dans la value. Donc, tu peux imaginer que le contenu dans le div#d_1 soit une ou plusieurs combobox. Le client fait une deuxième sélection et ainsi de suite. Pour sélectionner une valeur dans une combobox, il faut utiliser la fonction .val() en jQuery. Je te propose de dé-commenter cette ligne de code : //$('select#eleve-departements').val(1); Elle te permettra de sélectionner une valeur par défaut dans la combobox. Bien-sûr, ceci est un exemple pour te donner une idée sur quel pied rebondir. Tu devras bien-sûr dans ton application, faire des requêtes asynchrones dans une fonction de la classe $.eleve pour afficher ton contenu. stéph

JangotheCool · Answer

Merci Stay.
J'ai compris la 1ère ligne qui sélectionne une valeur par défaut. Le reste je ne pas comprend pas car ça n'a rien retourné comme résultat.
Mais si vous pouvez prendre mon formulaire te ma base de données postés en haut comme exemple je comprendrais mieux.
Merci!

JangotheCool · Answer

J'ai compris enfin votre script Stay. Je faisais une confusion. ça marche bien!
Mais je rappelle: veuillez prendre mon formulaire et base de données comme exemple.

cs_stay · Answer

Salut, si tu veux un résultat, tu dois sélectionner un département dans la liste et cliquer sur envoyer.
Ce n'est qu'un exemple pour ton application.
Mais la réalité c'est que la procédure, c'est toi qui dois la créer.
Si tu rencontres une difficulté pendant le développement, pose moi des questions en relation du problème rencontré.
L'idée c'est que tu apprends à coder. Si je le fait pour toi, ce n'est pas te rendre service.

stéph

JangotheCool · Answer

ok je comprend; je vais essayer. 
A bientôt!

JangotheCool · Answer

Stay, j'ai essayé quelques choses qui marche.
Mais je veux votre aide pour l'améliorer.Ou bien avez-vous d'autre solution plus simple? 
J'ai utilisé la bdd postée en haut.
Nom de la base de données: listes_liees
voici les autres fichiers:
Liste.html




Liste Liée


$(document).ready(function() {
    var $dep = $('#dep');
    var $com = $('#com');
     
    // chargement des départements
    $.ajax({
        url: 'Commune.php',
        data: 'go', // on envoie $_GET['go']
        dataType: 'json', // on veut un retour JSON
        success: function(json) {
            $.each(json, function(index, value) { // pour chaque noeud JSON
                // on ajoute l option dans la liste
                $dep.append(''+ value +'');
            });
        }
    });
 
    // à la sélection d un département dans la liste
    $dep.on('change', function() {
        var val = $(this).val(); // on récupère la valeur du département
 
        if(val != '') {
            $com.empty(); // on vide la liste des communes
             
            $.ajax({
                url: 'Commune.php',
                data: 'iddep='+ val, // on envoie $_GET['iddep']
                dataType: 'json',
                success: function(json) {
$com.append('--Communes--');
                    $.each(json, function(index, value) {
                        $com.append(''+ value +'');
                    });
                }
            });
        }

    });
});

//Université 
$(document).ready(function() {
    var $com = $('#com');
var $universite = $('#universite');
    $com.on('change', function() {
        var val = $(this).val(); 
        if(val != '') {
            $universite.empty();
            $.ajax({
                url: 'campus.php',
                data: 'idcom='+ val,
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $universite.append(''+ value +'');
                    });
                }
            });
        }


    });
});
// ecole_primaire

$(document).ready(function() {
var $com = $('#com');
var $ecolesd = $('#ecolesd');
$com.on('change', function() {
var valeur = $(this).val(); 
if(valeur != '') {
$ecolesd.empty();  
$.ajax({
url: 'ecole_primaire.php',
data: 'idcom='+ valeur, 
dataType: 'json',
success: function(json) {
$.each(json, function(index, value) {
$ecolesd.append(''+ value +'');
});
}
});
}

});
});	
// ecole_secondaire
$(document).ready(function() {
var $com = $('#com');
var $ecolepri = $('#ecolepri');
$com.on('change', function() {
var valeur = $(this).val(); 
if(valeur != '') {
$ecolepri.empty(); 
 
$.ajax({
url: 'ecole_secondaire.php',
data: 'idcom='+ valeur, 
dataType: 'json',
success: function(json) {
$.each(json, function(index, value) {
$ecolepri.append(''+ value +'');
});
}
});
}

});
});	







-- Départements --

 
   


-- Communes --

     
  

  
    
       -- Universié --
    
    
  

  
    
       -- Ecole secondaire --
    
      
  

    
       -- Ecole Primaire --
    







Commune.php

ecole_secondaire.php

cs_stay · Answer

Salut, très bien je vais installer l'application en local et je reviendrais vers toi.
À plus tard.

stéph

JangotheCool · Answer

OK. 
A bientôt!

cs_stay · Answer

Salut, Le code était d'un niveau très faible. Les défauts du développement sont : - Les codes redondants - Le manque d'originalité sur la création du code - Énormément de fichiers pour très peu de code - Tu t'es compliqué la vie sur la sécurité du code SQL - L'application n'était pas terminé L'application n'était pas terminé car si tu changes de valeur dans la première ou seconde combobox, les valeurs dans les combobox suivante n'était plus géré. Donc, je ne te rend pas service car j'ai terminé le travail pour toi. Tu dois revoir les bases de la programmation, les array, les arbres, les récursives et l'optimisation du code (la réutilisation d'une méthode) et une belle remise en question. Garde en tête que ces critiques sont positives pour t'améliorer. J'ai supprimé tout les fichiers excepté Liste.html. Pour le code PHP, j'ai créé le fichier request.php. Pour le jQuery, j'ai créé une classe dans le fichier jquery.list.js La méthode $.list.init(); en pied de page du fichier Liste.html initialise le process pour les listes. Le code reste n'est en moins rudimentaire pour sa structure et sécurité. Je n'ai pas optimisé à 100% le jQuery car il y a du contenu (libellé des tags option). La solution est de retourner le libellé en json. Voici l'application : Le fichier Liste.html Liste Liée Le fichier jquery.list.js (function($) { $.list = { file: 'request.php', setData: 'go', id: 'dep', title: null, init: function() { $.list.getList(); $('#dep').on('change', function() { $.list.setData = 'iddep='+$('#dep').val(); $.list.id = 'com'; $.list.title = 'Communes'; $.list.getList(); $('#uni').html(''); $('#ecolesd').html(''); $('#ecolepri').html(''); }); $('#com').on('change', function() { $.list.setData = 'idcom='+$(this).val(); $.list.id = 'uni'; $.list.title = 'Université'; $.list.getList(); }); }, getList: function() { $.ajax({ url: $.list.file, data: $.list.setData, dataType: 'json', success: function(json) { if (!!$.list.title) { $('select#'+$.list.id).html(''); $('#'+$.list.id).append(''); } $.each(json, function(index, value) { $('#'+$.list.id).append(''); }); switch ($.list.id) { case 'uni': $.list.setData = 'ecolesd=ok&idcom='+$('#com').val(); $.list.id = 'ecolesd'; $.list.title = 'Ecole secondaire'; $.list.getList(); break; case 'ecolesd': $.list.setData = 'ecolepri=ok&idcom='+$('#com').val(); $.list.id = 'ecolepri'; $.list.title = 'Ecole Primaire'; $.list.getList(); break; } } }); } } })(jQuery); Le fichier request.php prepare("SELECT id, nom FROM ecole_secondaire WHERE idcom :idcom ORDER BY nom"); $stmt->bindParam(':idcom', $_GET['idcom']); } elseif ((isset($_GET['ecolepri'])) && (isset($_GET['idcom']))) { $stmt $conn->prepare("SELECT id, nom FROM ecole_primaire WHERE idcom :idcom ORDER BY nom"); $stmt->bindParam(':idcom', $_GET['idcom']); } elseif (isset($_GET['idcom'])) { $stmt $conn->prepare("SELECT id, nom FROM campus WHERE idcom :idcom ORDER BY nom"); $stmt->bindParam(':idcom', $_GET['idcom']); } elseif (isset($_GET['go'])) { $stmt = $conn->prepare("SELECT id, nom FROM departement ORDER BY nom"); } elseif (isset($_GET['iddep'])) { $stmt $conn->prepare("SELECT id, nom FROM commune WHERE iddep :id ORDER BY nom"); $stmt->bindParam(':id', $_GET['iddep']); } $stmt->execute(); $json = array(); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $json[$row['id']][] = utf8_encode($row['nom']); } echo json_encode($json); ?> Bien à toi, stéph

JangotheCool · Answer

Bonjour Stay
Problème résolu. 
Je vous remercie très sincèrement et vous promet de m'améliorer les fois prochaines.Vos remarques et critiques seront prises en compte.
A plus!

cs_stay · Answer

Super :)
A bientôt!

stéph

cs_saille · Answer

Bonjour Stay, Je me suis donc largement inspiré de votre exemple. Mais je cale dès l'affichage des départements. Formulaire Demande ----, ---- Mon adresse, ----

----, Adresse où le courrier doit vous être envoyé ---- Département * Code postal/Ville *

jquery.list.js (function($) { $.list = { file: 'request.php', setData: 'go', id: 'CouDep', title: null, init: function() { $.list.getList(); $('#CouDep').on('change', function() { $.list.setData = 'iddep='+$('#CouDep').val(); $.list.id = 'CouInsee'; $.list.title = 'Communes'; $.list.getList(); }); }, getList: function() { $.ajax({ url: $.list.file, data: $.list.setData, dataType: 'json', success: function(json) { if (!!$.list.title) { $('select#'+$.list.id).html(''); $('#'+$.list.id).append(''); } $.each(json, function(index, value) { $('#'+$.list.id).append(''); }); } }); } } })(jQuery); request.php J'ai probablement fait une erreur monstrueuse ... soyez pas trop faché je suis un débutant qui ne demande qu'à s'améliorer ..... mais je sèche Merci Saille

cs_stay · Answer

C'est dommage, je t'ai mis un superbe exemple de requête préparer et toi tu t'exposes au piratage d'un hacker.
Le script qui initialise la classe list peut être déplacé en pied de page devant le tag body.
Tu dois également revoir les possibilités qu'offre les différent tags d'une table que tu n'utilises pas.

$query="SELECT InseeCDPOS, LibelleCDPOS FROM CDPostaux WHERE SUBSTR(CodeCDPOS, 1, 2) =" . $_GET['iddep'] . "ORDER BY CodeCDPOS";
Et ta principal erreur, c'est la requête, la syntaxe n'est pas bonne.
Tu dois faire ceci pour la syntaxe.

<?php
$query="SELECT InseeCDPOS, LibelleCDPOS, SUBSTR(CodeCDPOS, 1, 2) FROM CDPostaux WHERE CodeCDPOS = " . $_GET['iddep'] . "ORDER BY CodeCDPOS";


N'oublie pas de faire un bindParam des valeurs retournées par get ou post dans toute tes requêtes préparé en PDO, c'est le plus important ;)

stéph

cs_saille · Answer

J'ai déplacé d'initialisation juste avant le 

J'ai modifié mon request.php de cette manière suite à tes conseils :
<?php 
// connexion à la base de données
try {
require("admin/include/configure.php");
$conn = new PDO("mysql:host=$serveur; dbname=$db", $utilisateur, $passe);
} 
catch(Exception $e) {
exit('Impossible de se connecter à la base de données.');
}
// liste des départements
if (isset($_GET['go'])) {
    $stmt = $conn->prepare("SELECT DepCode, DepLibelle FROM DEP ORDER BY DepLibelle");
$stmt->execute();
$json = array(); 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $json[$row['DepCode']][] = utf8_encode($row['DepLibelle']);
}
} 
// liste des communes
elseif (isset($_GET['iddep'])) {
$stmt $conn->prepare("SELECT InseeCDPOS, LibelleCDPOS, SUBSTR(CodeCDPOS, 1, 2) FROM CDPostaux WHERE SUBSTR(CodeCDPOS, 1, 2) :id ORDER BY CodeCDPOS");
$stmt->bindParam(':id', $_GET['iddep']);
$stmt->execute();
$json = array(); 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $json[$row['InseeCDPOS']][] = utf8_encode($row['LibelleCDPOS']);
}
}
echo json_encode($json);
?>

Si j'ai bien compris, le fait d'utiliser des requêtes préformatées avec le bindParam protège contre le hackeur ?

Mais mon département ne s'affiche toujours pas. J'ai fait un test d'appeller le request.php en direct, après avoir enlevé la condition "if (isset($_GET['go'])) " de manière à passer forcément dessus et j'ai ajouté un echo de $json. La table est correctement remplie.

J'ai plutôt l'impression que c'est le jquery.list.js qui ne récupère pas les informations en retour, ou n'arrive pas à exécuter le request.php.

Concernant la sélection des communes, je dois bien dans le where ne tester que les 2 permières positions du code postal, mais ça marche en sql donc ça devrait fonctionner ici. Crois-tu qu'il serait plus élégant de faire un like ?

Merci de tes lumières
Saille

cs_stay · Answer

La requête est toujours incorrecte.
tu as mis WHERE SUBSTR(CodeCDPOS, 1, 2) = :id 
Alors que c'est WHERE CodeCDPOS = :id

stéph

cs_stay · Answer

Pour les communes, tu dois récupérer uniquement les deux premiers, donc oui un LIKE avec un moteur de stockage MyISAM et préserve l'ORDER BY.

stéph

cs_saille · Answer

Bonjour,

Incroyable, j'ai fait ça et c'est bon $stmt = $conn->prepare("SELECT InseeCDPOS, LibelleCDPOS, SUBSTR(CodeCDPOS, 1, 2) FROM CDPostaux WHERE CodeCDPOS like :id ORDER BY CodeCDPOS");
$departement = $_GET['iddep']."%";
$stmt->bindParam(':id', $departement);

Tu es vraiment un chef 

Bon je vais compliquer un peu les choses, quand on aime on ne compte pas ! J'ai une autre sélection département/commune. Et cerise sur le gateau, une série de 3 listes imbriquées 

Je m'y lance. Je reviendrai probablement crier au secours à un moment ou à un autre 

Merci en tous cas, stay, j'apprend beaucoup 
Saille

cs_stay · Answer

Super, pour la relecture de ta requete SQL en cas de bogue, il est important d'être rigoureux dans l'indentation.
De plus, mettre en majuscule les clauses aide aussi.
Exemple pour ton script :


<?php
$request = "SELECT InseeCDPOS, LibelleCDPOS, SUBSTR(CodeCDPOS, 1, 2) 
            FROM CDPostaux 
            WHERE CodeCDPOS 
            LIKE :id 
            ORDER BY CodeCDPOS";
$stmt = $conn->prepare($request);
$departement = $_GET['iddep']."%";
$stmt->bindParam(':id', $departement);


Bien sûr, les petites requêtes non pas besoin d'une attention particulière.

stéph

cs_saille · Answer

Bonjour,

J'ai inclus mes autres listes dont deux avec 3 niveaux, impeccable !

J'ai juste une question subsidiaire, nous faisons appel à un .js de ajax.googleapis.com, pas de risque que les dossiers soient remaniés et que mon formulaire ne fonctionne plus ?

Merci
Saille

cs_stay · Answer

Salut, il est sûr que d'ajouter le script dans ton application ne va pas alourdir le programme.
Donc, si tu veux être rassurer, pourquoi pas 
Mais, ce n'est pas moi qui dira que Google va planter.

stéph

Listes dynamiques liées

22 réponses

Votre réponse

Discussions similaires