Listes dynamiques liées

Signaler
-
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
-
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

22 réponses

Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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’espère que ce poste ta rendu service ?

stéph
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!
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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 :
<select id="eleve-departements" name="eleve[departements]">
    <option value="0">aucun</option>
    <option value="1">Départements 1</option>
    <option value="2">Départements 2</option>
</select>
[# envoyer]


Aucun résultat


Départements 1 est la bonne réponse


Aucun résultat pour le "Départements 2"


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(function() {
        //$('select#eleve-departements').val(1);
    	$.eleve = {
    	    getDepartement: function() {
//console.log($('#eleve-departements').val());
$('div.content').css('display','none');
$('div#d_'+$('#eleve-departements').val()).css('display','block');
    	    }
    	}
    });
    //]]>
</script>


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
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!
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.
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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
ok je comprend; je vais essayer.
A bientôt!
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
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Salut, très bien je vais installer l'application en local et je reviendrais vers toi.
À plus tard.

stéph
OK.
A bientôt!
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title>Liste Liée</title>
</head>



    <select id="dep" name="dep">
        <option value="0">-- Départements --</option>
    </select>
    <select id="com" name="com">
        <option value="0">--Communes--</option>
    </select>
    <select id="uni" name="uni">
        <option value="0">--Université--</option>
    </select>
    <select id="ecolesd" name="ecolesd">
        <option value="0">--Ecole secondaire--</option>
    </select>
    <select id="ecolepri" name="ecolepri">
        <option value="0">--Ecole Primaire--</option>
    </select>


<script type="text/javascript" src="jquery.list.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    $.list.init();
});
//]]>
</script>

</html>


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('<option value="0">--Université--</option>');
                $('#ecolesd').html('<option value="0">--Ecole secondaire--</option>');
                $('#ecolepri').html('<option value="0">--Ecole Primaire--</option>');
            });
            $('#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('<option value="0">--'+$.list.title+'--</option>');
                    }
                    $.each(json, function(index, value) {
                        $('#'+$.list.id).append('<option value="'+index+'">'+value+'</option>');
                    });
                    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
<?php     
// connexion à la base de données
try {
    $conn = new PDO('mysql:host=localhost;dbname=listes_liees', 'root', '');
} catch(Exception $e) {
    exit('Impossible de se connecter à la base de données.');
}
if ((isset($_GET['ecolesd'])) && (isset($_GET['idcom']))) {
    $stmt $conn->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
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!
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
Super :)
A bientôt!

stéph
Messages postés
8
Date d'inscription
vendredi 27 novembre 2009
Statut
Membre
Dernière intervention
15 février 2013

Bonjour Stay,

Je me suis donc largement inspiré de votre exemple. Mais je cale dès l'affichage des départements.

Formulaire

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="fr" />
<title>Demande</title>
<link rel="stylesheet" type="text/css" href="script/styleTest.css" />
<script type="text/JavaScript" language="JavaScript" src="ControleDemandeListe.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<table cellspacing="0" cellpadding="0" width="850" border="0"><form enctype="multipart/form-data" name="form01" id="form01">
----,
</td>

----

Mon adresse,

----

<table width="100%" height="298" class="Tableau">
----, Adresse où le courrier doit vous être envoyé</td>

----

Département *

<select id="CouDep" name="CouDep">
<option value="0">-- Départements --</option>
</select>
Code postal/Ville *
<select id="CouInsee" name="CouInsee">
<option value="0">--Communes--</option>
</select>

<script type="text/javascript" src="jquery.list.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$.list.init();
});
//]]>
</script>
</td>
    </tr>
</form></table>
</td>
  </tr>
</table>

</html>



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('<option value="0">--'+$.list.title+'--</option>');
                    }
                    $.each(json, function(index, value) {
                        $('#'+$.list.id).append('<option value="'+index+'">'+value+'</option>');
                    });
}
            });
        }
    }
})(jQuery);



request.php

<?php 
// connexion à la base de données
try {
require("admin/include/configure.php");
$connexion = mysql_connect($serveur,$utilisateur,$passe);
mysql_select_db($db,$connexion);
}
if (isset($_GET['go'])) {
    $query="SELECT DepCode, DepLibelle FROM DEP ORDER BY DepLibelle";
$result = mysql_query($query); 
$json = array(); 
while ($row = mysql_fetch_array($result){
        $json[$row['DepCode']][] = utf8_encode($row['DepLibelle']);
        }
} elseif (isset($_GET['iddep'])) {
    $query="SELECT InseeCDPOS, LibelleCDPOS FROM CDPostaux WHERE SUBSTR(CodeCDPOS, 1, 2) =" . $_GET['iddep'] . "ORDER BY CodeCDPOS";
$result = mysql_query($query); 
$json = array(); 
while ($row = mysql_fetch_array($result){
        $json[$row['InseeCDPOS']][] = utf8_encode($row['LibelleCDPOS']);
        }
}
echo json_encode($json);
?>


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
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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
Messages postés
8
Date d'inscription
vendredi 27 novembre 2009
Statut
Membre
Dernière intervention
15 février 2013

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
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
La requête est toujours incorrecte.
tu as mis WHERE SUBSTR(CodeCDPOS, 1, 2) = :id
Alors que c'est WHERE CodeCDPOS = :id

stéph
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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
Messages postés
8
Date d'inscription
vendredi 27 novembre 2009
Statut
Membre
Dernière intervention
15 février 2013

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
Messages postés
493
Date d'inscription
jeudi 7 juillet 2005
Statut
Membre
Dernière intervention
24 mai 2017
2
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