IdentifiantMot de passe
Loading...
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

JavaScript Discussion :

Listes déroulantes imbriquées en appuyant sur un bouton


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Deux Sèvres (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Janvier 2020
    Messages : 63
    Par défaut Listes déroulantes imbriquées en appuyant sur un bouton
    Bonjour à tous,

    Dans le cadre d'un projet tutoré je dois réalisé un site web.

    Pour ce dernier j'ai besoin d'avoir la possibilité de cliquer sur un bouton et que ça m'afficher des listes imbriquées.

    Ce que j'ai réussi à faire :

    J'ai réalisé deux listes déroulantes imbriquées se remplissant automatiquement lorsque l'on clique sur un élément d'une liste.

    Je souhaiterais maintenant, lorsque l'on clique sur un bouton, que ça m'affiche ces listes déroulantes.

    J'ai fait de l'ajax, du javascript et du php afin de faire ces listes.

    Afin de pouvoir enregistrer correctement mes informations dans ma bdd, et pour éviter d'avoir des conflits entre mes listes, j'ai fait incrémenté de 1 à chaque nouveau clique sur mon bouton.


    Ce que je n'arrive pas à faire (mon problème) :

    Cependant, lorsque je clique sur mon bouton, il n'y a que la 1ère liste qui s'affiche, et les autres ne s'alimente pas en fonction de ce que j'ai sélectionné.

    Voici le lien du site qui illustre mes propos : http://stid-niort.fr/omacap2/adminis...sie/essai2.php


    Avez vous une idée de comment faire ?

    En vous remerciant par avance de l'aide que vous pourrez m'apporter.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    regarde ce que donne le code que tu construis avec cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="phase"'+score1+ 'id="phase"'+score1+'>';
    qui va te donner quelque chose comme
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name="phase" 0id="phase" 0>
    ... et cette autre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select type="text" name="appareil"'+score1+ 'id="appareil"'+score1 + 'onchange="goliste()">';
    qui va te donner quelque chose comme
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <select type="text" name="appareil" 0id="appareil" 0onchange="goliste()">
    et ...

    tu as un mauvais placement des guillemets, il te faut déjà corriger cela !

  3. #3
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Deux Sèvres (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Janvier 2020
    Messages : 63
    Par défaut
    Bonjour,

    Merci pour ta réponse rapide.

    J'ai changé partout mon code, en mettant celui ci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="phase + score1" id="phase + score1">';
    Et en changeant pour tout le reste.

    Je ne sais pas si c'est bon ce que j'ai fais, mais normalement, je penses que ça m'affichera le code html suivant :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <select name="phase0" id="phase0">'
    mais en tout cas cela ne fonctionne toujours pas pour alimenter les listes...

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Tu n'en es pas loin mais tu as maintenant un problème avec tes simples quottes.

    Il te faut écrire, par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="phase' + score1 + '" id="phase' + score1 + '">';
    idem pour les autres, note la différence avec la coloration syntaxique.

    Pendant que l'on y est :
    avec les navigateurs modernes ta fonction getXhr se résume à
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function getXhr() {
      return new XMLHttpRequest();
    }
    il te faut sortir ta fonction goliste de la fonction addInput et cela pour une raison de scope, elle ne sera pas reconnue hors de la fonction addInput.

    tu devrais passer en paramètre de ta fonction goliste le <select> concerné car rien ne te garantie au moment de exécution de celle-ci que score1 corresponde au bon <select>.
    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
    function go(sel) {
        var xhr = getXhr();
        var idappareil = sel.value;
        // On définit ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function () {
            // On ne fait quelque chose que si on a tout reçu et que le serveur est OK
            if (xhr.readyState == 4 && xhr.status == 200) {
                leselect = xhr.responseText;
                // On se sert de innerHTML pour rajouter les options à la liste
                document.getElementById('symptome').innerHTML = leselect;
            }
        }
        // Ici on va voir comment faire du post
        xhr.open("POST", "ajaxsymptome.php", true);
        // ne pas oublier ça pour le post
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // ne pas oublier de poster les arguments
        // ici, l'id de l'appareil
        //    sel = document.getElementById('appareil');
        //    idappareil = sel.options[sel.selectedIndex].value;
        xhr.send("ID_APPAREIL=" + idappareil);
    }
    et pour l'appel tu passes this, qui correspond au select qui émet l'événement
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="appareil' + score1 + '" id="appareil' + score1 + '" onchange="goliste(this)">';
    Tout ceci devrait te faire avancer !

    Conseil :
    n'hésite pas à te servir de la console, F12 pour voir tes erreurs et les corrections à apporter.

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Janvier 2020
    Messages
    63
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Deux Sèvres (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Janvier 2020
    Messages : 63
    Par défaut
    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
    function go(sel) {
        var xhr = getXhr();
        var idappareil = sel.value;
        // On définit ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function () {
            // On ne fait quelque chose que si on a tout reçu et que le serveur est OK
            if (xhr.readyState == 4 && xhr.status == 200) {
                leselect = xhr.responseText;
                // On se sert de innerHTML pour rajouter les options à la liste
                document.getElementById('symptome').innerHTML = leselect;
            }
        }
        // Ici on va voir comment faire du post
        xhr.open("POST", "ajaxsymptome.php", true);
        // ne pas oublier ça pour le post
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // ne pas oublier de poster les arguments
        // ici, l'id de l'appareil
        //    sel = document.getElementById('appareil');
        //    idappareil = sel.options[sel.selectedIndex].value;
        xhr.send("ID_APPAREIL=" + idappareil);
    }
    Dans le code que tu m'as mis (celui ci-dessus) c'est pas plutôt la fonction goliste() plutôt que go() ?

    Je me suis permis de me mettre goliste() à la place de go() dans ce code précédent, et cela me change bien les symptômes et appareils de ma 1ère liste imbriqués, mais ça ne m'affiche pas dans de nouvelles listes imbriqués...

    Par exemple, si je sélectionne digestif dans ma 1ère liste des appareils, mes listes imbriqués vont fonctionne (comme avant), mais si j'ajoute en cliquant sur le bouton, et que je sélectionne un nouvelle appareil, et que je prends par exemple, reproducteur, cela va aller me changer dans les listes ou j'ai mes éléments que concernant l'appareil digestif..

    Si ça peut t'aider voici le fichier ajaxliste.
    ajaxliste.php

    En tout cas merci pour ton aide.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Citation Envoyé par pun79
    Dans le code que tu m'as mis (celui ci-dessus) c'est pas plutôt la fonction goliste() plutôt que go() ?
    Comme tu appelles le même fichier, avec le même type de paramètre, tu ne devrais avoir qu'une seule et même fonction mais pas deux qui font la même chose, goliste() ou go() à toi de choisir!


    Par exemple, si je sélectionne digestif dans ma 1ère liste des appareils, mes listes imbriqués vont fonctionne (comme avant), mais si j'ajoute en cliquant sur le bouton, et que je sélectionne un nouvelle appareil, et que je prends par exemple, reproducteur, cela va aller me changer dans les listes ou j'ai mes éléments que concernant l'appareil digestif.
    Nous arrivons au point, non encore soulevé pour ne pas trop t'embrouiller, sur la duplication des IDs.

    Une ID doit être UNIQUE dans ta page et dans ton code ce n'est pas le cas !

    Lorsque tu crées un nouvelle ensemble tu fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<div id="symptome" style="display:inline">';
    donc tu dupliques l'ID « symptome » à chaque fois, et où est-ce que tu copies la réponse en retour ... dans ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('symptome').innerHTML = leselect;
    ce sera donc toujours dans le premier élément « symptome ».

    Il te faudrait donc faire , par exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<div id="symptome' + score1 + '" style="display:inline">';
    Attention dans ce cas il y aura également duplication car 1 ligne plus loin tu écris
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="symptome"' + score1 + ' id="symptome"' + score1 + '>';
    comme tu n'as visiblement pas besoin d'ID à cet endroit, tu peux purement et simplement la supprimer.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    content += '<select name="symptome' + score1 + '">';
    on arrive à quelque chose comme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // il ne faut pas dupliquer les ID
    //content += '<div id="symptome"style="display:inline">';
    content += '<div id="symptome' + score1 + '" style="display:inline">';
    content += ' Choisir un symptôme ';
    //content += '<select name="symptome"'+score1+' id="symptome"'+score1+'>';
    // il ne faut pas dupliquer l'ID, pas besoin ici
    content += '<select name="symptome' + score1 + '">';
    content += '<option value="-1">' + 'Aucun' + '</option>';
    content += '</select>';
    Ce n'est pas terminé, il te resteras à récupérer la valeur du score1 pour bien cibler l'élément dans lequel tu écriras la réponse du serveur, je te laisse y réfléchir

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 4
    Dernier message: 18/09/2015, 19h54
  2. afficher une liste box apres avoir appuyé sur un bouton
    Par maissaab dans le forum wxPython
    Réponses: 1
    Dernier message: 16/03/2011, 10h40
  3. Réponses: 5
    Dernier message: 15/12/2009, 19h47
  4. Comment Appuyer sur le bouton d'une page web...?
    Par Mayti4 dans le forum VB 6 et antérieur
    Réponses: 4
    Dernier message: 23/01/2005, 14h07

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