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

[pun79]

Bonjour,

Merci pour ta réponse.

Concernant la récupération des données de score 1, je suis débutant en JavaScript, et mes enseignants ne savent pas comment faire.

Cependant j'ai une idée pour la récupération de score1.

Est-ce qu'il ne serait pas possible de récupérer socre1 dans la fonction go() et ainsi lorsque je fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('symptome').innerHTML = leselect;

je mets :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('symptome"'+score1+'"').innerHTML = leselect;

ainsi, je récupère le nom de la liste déroulante avec le score1 ?

Est ce que cela fonctionnerais même avec la partie ajax ?

[NoSmoking]

Cependant j'ai une idée pour la récupération de score1.

Est-ce qu'il ne serait pas possible de récupérer socre1 dans la fonction go() ...

Bonne idée, cela s'appelle passage d'un paramètre au même titre que ton sel.

Si on veut aller plus loin, tu peux simplifier bien plus ton code en créant une « ID Unique » et en ne l'utilisant que lorsque tu en as vraiment besoin.

Le code de ta fonction addInput pourrait s'écrire de la sorte :

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
23
24
25
26
27
28
29
30
31
function addInput() {
    // création de l'ID
    const idUnique = "id-" + new Date().getTime();
    const elmt = document.getElementById('resultat');
    let content = "";
    content += "<div>"
        content += "A quelle catégorie appartient l'animal malade ? ";
        content += '<select name="phase[]">';
        content += '<option valeur="-1">' + 'Aucune' + '</option>';
        content += '<option valeur="PL">' + 'Phase lactée' + '</option>';
        content += '<option valeur="PS">' + 'Poste sevrage' + '</option>';
        content += '<option valeur="A">' + 'Adulte' + '</option>';
        content += '</select>';
 
        content += ' Choisir un appareil ';
        content += '<select name="appareil[]" onchange="go(this,\'' + idUnique + '\')">';
        content += '<option value="-1">' + 'Aucun' + '</option>';
        content += '<option value=8>autre</option><option value=7>mammaire</option><option value=6>reproducteur</option><option value=5>cutane</option><option value=4>locomoteur</option><option value=3>nerveux</option><option value=2>respiratoire</option><option value=1>digestif</option>';
        content += '</select>';
        content += '<div id="' + idUnique + '" style="display:inline">';
 
        content += ' Choisir un symptôme ';
        content += '<select name="symptome[]">';
        content += '<option value="-1">' + 'Aucun' + '</option>';
        content += '</select>';
 
        content += '</div>';
    content += '</div>';
    // ajout du HTML avec méthode insertAdjacentHTML, plus soft
    elmt.insertAdjacentHTML("beforeend", content);
}

Quelques points à signaler :

• création d'un « ID unique » basée sur l"heure de création en ms ;
• passage de l'ID créée en paramètre ;
• suppression des ID inutiles, j'ai laissé des name sous forme de tableau au cas où il y en ait besoin ;
• ajout du HTML avec la méthode insertAdjacentHTML, plus soft qu'en modifiant le innerHTML.

Concernant la fonction go cela se résume donc à :

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
function go(sel, idDestination) {
    // test si selection OK
    if (0 !== sel.selectedIndex) {
        const url = "ajaxsymptome.php";
        const idappareil = sel.value;
        const xhr = new XMLHttpRequest();
        // On définit ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                const reponse = xhr.responseText;
                document.getElementById(idDestination).innerHTML = reponse;
            }
        }
        xhr.open("POST", url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send("ID_APPAREIL=" + idappareil);
    }
}

Nota :
compte tenu de l'existence de cette fonction tu pourrais même créer le premier élément directement en utilisant celle-ci et ce sans mettre de HTML en dur.

Script à ajouter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
// Initialisation après chargement du DOM
document.addEventListener("DOMContentLoaded", function() {
  const btnAjout = document.getElementById("ajout");
  btnAjout.onclick = addInput;
  // création 1st ligne
  addInput();
});

ton HTML se résumerait donc à :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<h2> Affections dominantes </h2>
<p><input type="button" id="ajout" value="Ajouter une liste">
<div id="resultat"></div>

[EDIT] correction code ligne #16

[pun79]

Merci pour ton message clair et explicite ainsi que le code que tu as pu me faire.

Cependant lorsque je le copie dans mon fichier, et que je regarde si les listes déroules fonctionnes, il n'y as plus rien.

Ne faut il pas aussi changer du code en ajax (ajaxsymptome.php) dans mon cas ?

Est-ce que as une idée d'où cela pourrait venir ?

En te remerciant par avance de ton aide précieuse que tu m'apporte.

[NoSmoking]

j'ai écrit un peu vite

ligne #16 il faut mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

content += '<select name="appareil[]" onchange="go(this,\'' + idUnique + '\')">';

Je corrige le code, il fallait ajouter et échapper des simples quottes.

[pun79]

OK.

Merci, j'ai la ligne que tu m'as indiqué.

Si cela peut t'aide, même en changeant la ligne, cela ne fonctionne toujours pas.

Je corrige le code, il fallait ajouter et échapper des simples quottes.

J'attends le reste de ton code de modification comme tu m'indique dans la citation.

[NoSmoking]

J'ai corrigé une autre coquille dans ma correction il faut mettre l'appel à la fonction go et non goliste.

[pun79]

Super.

Ca fonctionne niquel.

Merci à toi.

[NoSmoking]

Pour aller un peu plus loin, tu as du code en trop dans la fonction addInput qui peut être supprimé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/* INUTILE car on le reécrit 
content += '<p>Choisir un symptôme ';
content += '<select name="symptome[]">';
content += '<option value="-1">' + 'Aucun' + '</option>';
content += '</select>';
/*--*/

et mettre dans la fonction go :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById(idDestination).innerHTML = "Choisir un symptôme :" +reponse;

[pun79]

Je me permets de revenir vers vous concernant maintenant l'enregistrement dans la bdd.

Comment peut-on savoir l'id de la liste déroulante pour pouvoir l'enregistrer après dans la bdd ?

Je m'explique, lorsque l'on fait une liste déroulante, on connait le nom de la liste déroulante, du coup on peut faire un $_POST['nomdelaliste'].

La comme on crée une liste déroulante qui porte le nom de la liste et de l'identifiant unique qui est créée à partir du clique sur le bouton en récupérant l'heure du clique sur le bouton.

Comment peut-on faire cela, ne sachant pas à quel heure il a cliqué sur le bouton ?

En vous remerciant par avance de votre aide généreuse.

[pun79]

C'est bon j'ai réussi à le faire avec un sizeof et donc du coup j'ai fait une boucle et pris les éléments qui était à l'intérieur de la liste.