Sujet Précédent Sujet Suivant

Alimenter des select créés par createElement ?

Résolu/Fermé
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - Modifié le 25 août 2022 à 12:07
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 26 août 2022 à 11:36

Bonjour,

J'ai deux questions concernant le script que j'ai écrit ci-dessous : 

1. N'y avait-il pas plus simple ?
2. J'aimerai bien avoir une piste sur la manière de remplir mes select avec du contenu en provenance d'une bdd sachant que ces select sont créés dans une div générée par Javascript ?

Merci pour vos lumières !

function ajoutMenu() {
    // Création d'une zone formulaire :            
    jour = jour + 1;
    if (jour <= 7) {
        var div = document.createElement('div');
        div.setAttribute('id', 'jour' + jour);
        div.setAttribute('data-label', 'JOUR' + jour);
        div.setAttribute('class', 'div-jour');

        var del = document.createElement('button');
        del.setAttribute('onclick', 'supprMenu(' + jour + ')');

        var delImage = document.createElement('img');
        delImage.setAttribute('src', '../gestion/img/delete.png');
        delImage.setAttribute('class', 'td-icone');


        var fieldsetMatin = document.createElement('fieldset');
        var fieldsetMidi = document.createElement('fieldset');
        var fieldsetSoir = document.createElement('fieldset');

        var legendeMatin = document.createElement('legend');
        legendeMatin.appendChild(document.createTextNode('Matin :'));

        var legendeMidi = document.createElement('legend');
        legendeMidi.appendChild(document.createTextNode('Midi :'));

        var legendeSoir = document.createElement('legend');
        legendeSoir.appendChild(document.createTextNode('Soir :'));

        var dateJour = document.createElement('input');
        dateJour.setAttribute('name', 'dateJour' + jour);
        dateJour.setAttribute('id', 'dateJour' + jour);
        dateJour.setAttribute('type', 'date');
        dateJour.setAttribute('class', 'box-rglt-left');

        var quantiteMatin = document.createElement('input');
        quantiteMatin.setAttribute('name', 'quantite-matin' + jour);
        quantiteMatin.setAttribute('id', 'quantite-matin' + jour);
        quantiteMatin.setAttribute('type', 'number');
        quantiteMatin.setAttribute('required', 'required');
        quantiteMatin.setAttribute('class', 'box-rglt-left');

        var quantiteMidi = document.createElement('input');
        quantiteMidi.setAttribute('name', 'quantite-midi' + jour);
        quantiteMidi.setAttribute('id', 'quantite-midi' + jour);
        quantiteMidi.setAttribute('type', 'number');
        quantiteMidi.setAttribute('required', 'required');
        quantiteMidi.setAttribute('class', 'box-rglt-left');

        var entreeMidi = document.createElement('input');
        entreeMidi.setAttribute('name', 'entree-midi' + jour);
        entreeMidi.setAttribute('id', 'entree-midi' + jour);
        entreeMidi.setAttribute('type', 'select');
        entreeMidi.setAttribute('class', 'box-rglt-left');

        var platMidi = document.createElement('input');
        platMidi.setAttribute('name', 'plat-midi' + jour);
        platMidi.setAttribute('id', 'plat-midi' + jour);
        platMidi.setAttribute('type', 'select');
        platMidi.setAttribute('class', 'box-rglt-left');

        var dessertMidi = document.createElement('input');
        dessertMidi.setAttribute('name', 'dessert-midi' + jour);
        dessertMidi.setAttribute('id', 'dessert-midi' + jour);
        dessertMidi.setAttribute('type', 'select');
        dessertMidi.setAttribute('class', 'box-rglt-left');

        var autreMidi = document.createElement('input');
        autreMidi.setAttribute('name', 'autre-midi' + jour);
        autreMidi.setAttribute('id', 'autre-midi' + jour);
        autreMidi.setAttribute('type', 'select');
        autreMidi.setAttribute('class', 'box-rglt-left');

        var quantiteSoir = document.createElement('input');
        quantiteSoir.setAttribute('name', 'quantite-soir' + jour);
        quantiteSoir.setAttribute('id', 'quantite-soir' + jour);
        quantiteSoir.setAttribute('type', 'number');
        quantiteSoir.setAttribute('required', 'required');
        quantiteSoir.setAttribute('class', 'box-rglt-left');

        var entreeSoir = document.createElement('input');
        entreeSoir.setAttribute('name', 'entree-soir' + jour);
        entreeSoir.setAttribute('id', 'entree-soir' + jour);
        entreeSoir.setAttribute('type', 'select');
        entreeSoir.setAttribute('class', 'box-rglt-left');

        var platSoir = document.createElement('input');
        platSoir.setAttribute('name', 'plat-soir' + jour);
        platSoir.setAttribute('id', 'plat-soir' + jour);
        platSoir.setAttribute('type', 'select');
        platSoir.setAttribute('class', 'box-rglt-left');

        var dessertSoir = document.createElement('input');
        dessertSoir.setAttribute('name', 'dessert-soir' + jour);
        dessertSoir.setAttribute('id', 'dessert-soir' + jour);
        dessertSoir.setAttribute('type', 'select');
        dessertSoir.setAttribute('class', 'box-rglt-left');

        var autreSoir = document.createElement('input');
        autreSoir.setAttribute('name', 'autre-soir' + jour);
        autreSoir.setAttribute('id', 'autre-soir' + jour);
        autreSoir.setAttribute('type', 'select');
        autreSoir.setAttribute('class', 'box-rglt-left');

        // CONSTRUCTION :
        div.appendChild(dateJour);
        div.appendChild(fieldsetMatin);
        fieldsetMatin.appendChild(legendeMatin);
        fieldsetMatin.appendChild(quantiteMatin);

        div.appendChild(fieldsetMidi);
        fieldsetMidi.appendChild(legendeMidi);
        fieldsetMidi.appendChild(quantiteMidi);
        fieldsetMidi.appendChild(entreeMidi);
        fieldsetMidi.appendChild(platMidi);
        fieldsetMidi.appendChild(dessertMidi);
        fieldsetMidi.appendChild(autreMidi);

        div.appendChild(fieldsetSoir);
        fieldsetSoir.appendChild(legendeSoir);
        fieldsetSoir.appendChild(quantiteSoir);
        fieldsetSoir.appendChild(entreeSoir);
        fieldsetSoir.appendChild(platSoir);
        fieldsetSoir.appendChild(dessertSoir);
        fieldsetSoir.appendChild(autreSoir);

        del.appendChild(delImage);
        div.appendChild(del);

        document.getElementById("detail_menu").appendChild(div);
    }
}

Résultat provisoire : 
 


Linux / Chrome 104.0.0.0

3 réponses

Réponse 1 / 3
Pitet
26 août 2022 à 10:04

 Bonjour,

1. Tu peux appeler directement la fonction dès la création du select sans passer par l'attribut onclick.

2. Tu peux passer le select à alimenter en paramètre de ta fonction RemplirSelect()

3. Le bug est surement lié à l'attribut onclick qui dois recharger les options lorsqu'on sélectionne une valeur, sans onclick tu ne devrais pas avoir ce problème.

Un début d'idée (code non testé) : 

var entreeMidi = document.createElement('select');
entreeMidi.setAttribute('name', 'entree-midi' + jour);
entreeMidi.setAttribute('id', 'entree-midi' + jour);                
entreeMidi.setAttribute('class', 'box-rglt-left');
RemplirSelect(entreeMidi, "entrée");

// ...

function RemplirSelect(select, typeRecette){
    $.ajax({
        type:'POST',
        url:'recettes_data.php',
        data:'RecetteType='+typeRecette,
        success:function(html){
            $(select).html(html);                                
        }
    });
}
1
Réponse 2 / 3
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
25 août 2022 à 16:49

J'ai fait ça qui réagit pas trop mal, mais c'est pas encore ça !

var entreeMidi = document.createElement('select');
entreeMidi.setAttribute('name', 'entree-midi' + jour);
entreeMidi.setAttribute('id', 'entree-midi' + jour);                
entreeMidi.setAttribute('class', 'box-rglt-left');
entreeMidi.setAttribute('onclick','RemplirSelect("entrée")');

.../...

function RemplirSelect(arg){
    var typeRecette=arg;
    $.ajax({
        type:'POST',
        url:'recettes_data.php',
        data:'RecetteType='+typeRecette,
        success:function(html){
            $("#entree-midi1").html(html);                                
        }
    });
}

<?php 
// Connexion à la base de données :
require ("../gestion/connexion.php");
if(!empty($_POST["RecetteType"])){ 
    // Récupération des recettes relatives au type sélectionné :
    $requete_recette = $bdd->prepare('SELECT * FROM recettes WHERE type = :type');
    $requete_recette->execute(array(':type' => $_POST['RecetteType']));
    $recettes=$requete_recette->fetchAll();
    $nbr_recettes = $requete_recette->rowCount();
    
    if($nbr_recettes>0){ 
        // Génération du code HTML pour la liste d'options : 
        echo '<option value="">Recette ?</option>';
        foreach($recettes as $valeur) {
            echo '<option value="' . $valeur['id_recette'] . '">' . $valeur['nom'] . '</option>';

        }
    }
    else {
        echo '<option value="">Aucune recette</option>';    
    }
}

Il faut maintenant : 
1. Que les SELECT se remplissent dès la création de la DIV.
2. Que la fonction RemplirSelect(arg) retourne les OPTIONS au bon SELECT
     (Je suppose que c'est avec event, event.target, event.target.value mais je n'ai pas bien compris comment le faire fonctionner).
3. Que la valeur sélectionnée dans le SELECT reste sélectionnée, or là, le SELECT est réinitialisé dès qu'on le quitte !?

Merci d'avance pour votre aide !
0
Réponse 3 / 3
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20
26 août 2022 à 10:56

Bonjour Pitet, 

Encore une fois tu me sauves, c'est exactement ce qu'il me fallait...

Donc pour bien comprendre : 
La valeur recherchée (ex: entrée) dans la base de données est envoyée à la fonction par l'intermédiaire de RemplirSelect comme deuxième paramètre, le premier étant le nom de la variable utilisée à la création de l'élément (ici 'select').

Le deuxième paramètre est reçu par la fonction en deuxième place, c'est logique, pour pouvoir être passé comme valeur à ajax afin de faire la requête...

Par contre d'où sort le select dans function RemplirSelect(select, typeRecette){  ?
Il correspond à l'élément qui est créé ligne 1 ?
On peut donc passer à une fonctions des paramètres qui peuvent être des valeurs ou des objets (?) ou éléments créés ?
 
0
Pitet
26 août 2022 à 11:25

Oui les paramètres d'une fonction js peuvent être de n'importe quel type.

Le paramètre select correspond effectivement à l'élément créé via document.createElement('select'), permettant ainsi de choisir l'élément à remplir :

var entreeMidi = document.createElement('select');
entreeMidi.setAttribute('name', 'entree-midi' + jour);
RemplirSelect(entreeMidi, "entrée");

var entreeSoir = document.createElement('select');
entreeSoir.setAttribute('name', 'entree-soir' + jour);
RemplirSelect(entreeSoir, "soir");

// ...

function RemplirSelect(select, typeRecette){
  console.log(select.name);
  
  // ...
}
1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 20 > Pitet
26 août 2022 à 11:36

C'est pourquoi je n'arrivais à rien en envoyant qu'un seul paramètre à ma fonction !
Merci pour ton aide et pour ce complément d'info !

0

Discussions similaires

Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
"Reboot and Select proper Boot Device"
Rodoxx -
Patrick -

5 réponses
"Please select a boot device " ? ???
EtienneRMsss -
Malekal_morte- -

1 réponse
Please select boot device
Pauline Emmy -
nadellen -

5 réponses
Asus bloqué au demarrage : reboot and select proper boot device
C -
R_7387 -

4 réponses