Discussion :

[pun79]

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.

[NoSmoking]

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 !

[pun79]

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...

[NoSmoking]

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.

[pun79]

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.

[NoSmoking]

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