11528 sujets

JavaScript, DOM et API Web HTML5

Remplir des SELECT créés par createElement('select')

Bonjour à tous,

Dans ma WebApplication, je créé de manière dynamique un SELECT que j'aimerai alimenter avec du contenu en provenance de ma base de données... Si j'arrive à le faire depuis une fonction pour UN select, je ne sais pas le faire pour les autres... D'autre part, je ne sais pas alimenter tous les SELECT à la création de la DIV les contenants, je sais seulement les alimenter dès que l'utilisateur clique dessus....
Je vous remercie par avance pour vos lumières !



// Création d'un SELECT : 
var entreeMidi = document.createElement('select');
entreeMidi.setAttribute('name', 'entree-midi' + jour);
entreeMidi.setAttribute('id', 'entree-midi' + jour);                
entreeMidi.setAttribute('class', 'input-formulaire contrat-nom');
entreeMidi.setAttribute('onclick','RemplirSelect("Entrée")');
/*RemplirSelect('Entrée');*/

// Un autre SELECT...etc etc
var platMidi = document.createElement('select');
platMidi.setAttribute('name', 'plat-midi' + jour);
platMidi.setAttribute('id', 'plat-midi' + jour);
platMidi.setAttribute('onclick','RemplirSelect("plat")');
RemplirSelect('plat');




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



recettes_data.php

<?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>';    
    }
}
?>

Modifié par etienne69 (26 Aug 2022 - 08:44)
Salut,

ça fait un moment que je n'ai pas fait d'ajax, mais je pense qu'il n'y a pas de raison de faire des echo du coté de recettes_data.php Smiley hum .
C'est une page que tu appelles via ajax pour obtenir des informations mais elle ne sera jamais affiché (a priori ..) donc pas besoin d'utiliser echo qui sert a afficher des informations si on va sur la page.
Il me semble que tu dois stocker dans une variable ce que tu veux renvoyer de l'autre coté (en encodant la variable en json)
Bonjour Mathieuu
En fait echo n'affiche rien, effectivement mais il sert dans la fonction ajax, notamment dans html(html) de cette partie : $("#entree-midi1").html(html); (correction : $(select).html(html); )
Si je supprimer echo, les SELECT restent désespérément vides !

Je viens de recevoir une réponse à ma question, que voici :
Il n'est pas nécessaire de faire un onclick sur mon SELECT, sinon il ne se rempli qu'au clic.
il faut donc supprimer cette ligne et faire un appel à la fonction directement en lui envoyant 2 paramètres et pas un seul comme je le faisais.
Ex : RemplirSelect(entreeMidi, "Entrée");
Le premier c'est le nom du SELECT créé, pour savoir où retourner le résultat de la fonction
Le deuxième c'est la valeur de recherche qu'Ajax va envoyer à la requête pour remplir le SELECT avec les bonnes valeurs....
La fonction quant à elle : function RemplirSelect(select, typeRecette){
On lui indique que c'est le select entreeMidi qui va être concerné et que la valeur typeRecette qu'elle va utiliser sera "Entrée"...
Voici ce que ça donne : 


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");

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



function RemplirSelect(select, typeRecette){
    $.ajax({
        type:'POST',
        url:'recettes_data.php',
        data:'RecetteType='+typeRecette,
        success:function(html){
            $(select).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>';    
    }
}
?>


upload/1661507589-52818-sanstitre.png
Modifié par etienne69 (26 Aug 2022 - 11:53)
Meilleure solution
Rah je connaissais pas cette fonction html, c'est cool :o
Pour moi il fallait forcement renvoyer du json, du coup je renvoyais le json_encode du array résultat de la requête puis je l'exploitais ensuite en javascript.

Et sinon sans rapport avec ton problème, je ne comprends pas trop pourquoi tu sépares la création du select de son remplissage.

A chaque fois que tu vas vouloir faire un nouveau select il va falloir recopier et adapter tes 5 lignes. En déplaçant les 4 premières lignes dans la fonction javascript, tu n'a plus besoin de les écrire à chaque fois. Il n'y aura plus qu'a boucler sur un tableau pour créer autant de select que voulu.

C'est du moins ce que j'aurai fais avec mon fonctionnement de json_encode. Mais avec ton fonctionnement avec les echo, j'ai l'impression que ça pourrait même être pousser jusque dans ta page php et que cela serait genre juste un echo d'un select en plus.
Je dirais que cela devrait juste être un truc du genre (mais je n'ai pas testé). 

<?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();

    echo '<select class="box-rglt-left" name="'.$_POST["SelectId"].'" id="'.$_POST["SelectId"].'">'; 
    
    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>';    
    }
    echo '</select>'; 
}
?>

Modifié par Mathieuu (26 Aug 2022 - 14:27)
Pour ce qui est du Json, j'ai bien vu des tutos de ce style : 

<?php
$id = $_GET['id'];
$query = mysql_query("select category_name from product_categories where Line_Code='$id'");
    while($data = mysql_fetch_assoc($query)){
        $values[] = array(
            'product_categories'=>$data['category_name'],
        );
}
echo json_encode($values);
?>

Mais compte tenu de mon niveau en Javascript, je n'aurai pas bien su comment exploiter le retour... Faut que je me documente là dessus.

Je sépare la création du SELECT de son remplissage car je ne savais pas comment faire autrement.Le SELECT étant intégré dans une DIV, elle même créée de manière dynamique par l'utilisation d'un BUTTON .
En voyant ton code, j'aurai pu effectivement éviter 5 lignes en JavaScript x par le nombre de SELECT(8 par DIV)... J'ai même essayé par un moment une boucle dans le JavaScript, mais devant la complexité j'ai laissé tombé !

Je me garde ta solution sous le coude, il n'est pas dit que je ne l'utilise pas si je venais par ex à enrichir la DIV !

Je te remercie en tous cas pour ton temps et tes explications claires !
Sujet clos
Aller à