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

  1. #21
    Expert éminent
    Retire les print_r.

    Il doit y avoir quelque chose qui déconne dans la fonction chargerFormation, mais difficile de savoir quoi. Puisqu’on avance un peu à l’aveugle, on va rajouter des console.log un peu partout :
    Code JS :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
    32
    function chargerFormation(ceSelect) {
      "use strict";
     
      console.log("--- début fonction chargerFormation");
      console.log("select changé : %o", ceSelect);
     
      // supprime l’ancien contenu du select id="Idformation"
      const selectFormation = document.getElementById("Idformation");
      console.log("select idFormation : %o", selectFormation);
      selectFormation.textContent = "";
     
      const x = ceSelect.value;
     
      // on va utiliser un fragment de document pour la performance
      const fragment = document.createDocumentFragment();
     
      // construit les nouvelles options
      const secFormations = lesFormations.filter((obj) => obj.sec === x);
      console.log("formations après filtrage : %d", secFormations.length);
      for (const formation of secFormations) {
        const option = document.createElement("option");
        option.value = formation.do;
        option.textContent = formation.f;
        fragment.appendChild(option);
        console.log("créé <option> pour formation %s (value = %s)", formation.f, formation.do);
      }
     
      // ajoute le fragment = ajoute toutes les options d’un coup
      selectFormation.appendChild(fragment);
     
      console.log("--- fin fonction chargerFormation");
    }
    Cette signature n'a pas pu être affichée car elle comporte des erreurs.

  2. #22
    Futur Membre du Club
    Bonjour,

    voila le résultat

    --- début fonction chargerFormation
    select changé :
    <select id="secteur" class="form-control" name="secteur" onchange="chargerFormation(this)" required="">

    select idFormation :
    <select id="Idformation" class="form-control" name="formation">

    formations après filtrage : 0
    --- fin fonction chargerFormation

  3. #23
    Expert éminent
    C’est la fonction de filtrage qui ne marche pas. Je pensais que les propriétés sec contenaient les id de secteurs, mais en réalité elles contiennent les noms.

    Edit&#8239;: pour être plus précis, les value des options contiennent les id, mais le JSON ne contient pas les id des secteurs, on doit donc utiliser le textContent des options pour filtrer sur les noms. (Je ne sais pas si je suis clair :$ )

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
      const x = ceSelect.selectedOptions[0].textContent.trim();
      console.log("x = %s", x);
    Cette signature n'a pas pu être affichée car elle comporte des erreurs.

  4. #24
    Futur Membre du Club
    ça marche enfin !!! Merci beaucoup !!!

    --- début fonction chargerFormation
    select changé :
    <select id="secteur" class="form-control" name="secteur" onchange="chargerFormation(this)" required="">

    select idFormation :
    <select id="Idformation" class="form-control" name="formation">

    x = Hotellerie
    formations après filtrage : 4 s_formation.js:169:5
    créé <option> pour formation DWWB2 (value = 2) s_formation.js:175:9
    créé <option> pour formation DWWB21 (value = 3) s_formation.js:175:9
    créé <option> pour formation DWWB22 (value = 4) s_formation.js:175:9
    créé <option> pour formation DWWB23 (value = 5) s_formation.js:175:9
    --- fin fonction chargerFormation

    Du coup dans le script comment je peux faire pour que quand la formation apparait juste en dessous que le lieu aussi se remplisse ainsi que les membre associés ?



    code html :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="form-group input-group">
        <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" disabled>
    </div>
     
    <div class="card" style="width: 40rem;">
      <div class="card-body">
        <h4 class="card-title">Email Assistant/coordo</h4>
        <div class="form-group bmd-form-group">
            <input type="text" name="assistant" id="assistant" class="form-control" placeholder="<?php echo 'Assistant : $nomA $prenomA $mailA'?>" disabled>
            <input type="text" name="coordo" id="coordo" class="form-control" placeholder="<?php echo 'Coordo : $nomC $prenomC $mailC'?>" disabled>
         </div>                                
      </div>
    </div>

  5. #25
    Expert éminent
    Applique la même méthode&#8239;: fais une nouvelle fonction JavaScript, et ajoute un attribut onchange au second select, qui appellera cette fonction. Pas besoin de PHP car les données sont dans le JSON.
    Utilise .filter() comme je t’ai montré&#8239;; cette fois il n’y aura qu’une seule formation donc tu n’as pas besoin de faire une boucle for.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    const laFormation = lesFormations.filter( ... )[0];
    console.log("formation sélectionnée : %o", laFormation);
    document.getElementById("lieu").value = `${laFormation.cdpost} ${laFormation.ville}`;
    document.getElementById("assistant").value = ... // etc.

    (Pour des détails sur la syntaxe ``, voir littéraux de gabarits.)
    Cette signature n'a pas pu être affichée car elle comporte des erreurs.

  6. #26
    Futur Membre du Club
    j'ai essayé et ça me donne
    j'ai essayé d'afficher les infos dont j'ai besoin mais j'ai pas réussi a récupérer ça me donne ça



    mon code JavaScript
    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
    32
    33
    34
     
    function chargerLieuCoordoAss(ceSelect) {
        "use strict";
     
        const lieuFormation = document.getElementById("lieu");
        lieuFormation.textContent = "";
     
        const assistantFormation = document.getElementById("assistant");
        assistantFormation.textContent = "";
     
        const coordoFormation = document.getElementById("coordo");
        lieuFormation.textContent = "";
     
        const cfcFormation = document.getElementById("cfc");
        cfcFormation.textContent = "";
     
        const x = ceSelect.selectedOptions[0].textContent.trim();
     
        // on va utiliser un fragment de document pour la performance
        const fragment = document.createDocumentFragment();
     
        const laFormation = lesFormations.filter((obj) => obj.do === x);
        document.getElementById("lieu").value = `${laFormation.cdpost} ${laFormation.ville}`;
     
        const laFormationAssistant = lesFormations.filter((obj) => obj.idass === x);
        document.getElementById("coordo").value = `${laFormation.an} ${laFormation.ap} ${laFormation.ae}`;
     
     
        const laFormationCoordo = lesFormations.filter((obj) => obj.idcoordo === x);
        document.getElementById("assistant").value = `${laFormation.cn} ${laFormation.cp} ${laFormation.ce}`;
     
        const laFormationCfc = lesFormations.filter((obj) => obj.idcfc === x);
        document.getElementById("cfc").value = `${laFormation.cfcn} ${laFormation.cfcp} ${laFormation.cfce}`;
    }


    et le html
    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
    32
    33
    34
    35
    36
    37
    38
    39
     
    <div class="form-group input-group">
       <select name="formation" id="Idformation" class="form-control" onchange="chargerLieuCoordoAss(this)">
           <option disabled selected>Formation</option>
       </select>
     
                                        <?php
                                        $lesFormations = $pdo->getToutesFormationsTousSecteurs();
                                        
                                        // options JSON : échappe le HTML, les guillemets doubles et simples, et signale les erreurs
                                        $json_options = JSON_HEX_TAG | JSON_HEX_QUOT | JSON_HEX_APOS | JSON_THROW_ON_ERROR;
                                        
                                        // prépare une version json du tableau $lesFormations
                                        $json_output = json_encode($lesFormations, $json_options);
                                        
                                        if (empty($json_output)) {
                                            // affiche un message d’erreur
                                            echo '<p>&#x26A0; La requête SQL a renvoyé un résultat vide !</p>';
                                            // unicode 26A0 = emoji warning sign
                                        }
                                        else {
                                        // écrit le code JavaScript
                                        echo "<script> 'use strict';
                                            const lesFormations = $json_output;
                                            </script>";
                                        }
                                        ?>
      </div>
     
        <div class="form-group input-group">
            <input type="text" name="lieu" id="lieu" class="form-control" placeholder="ville et code postal" disabled>
        </div>
    </div>
     
    <div class="form-group bmd-form-group">
       <input type="text" name="assistant" id="assistant" class="form-control" placeholder="Assistant afficher nom/prenom/mail" disabled>
       <input type="text" name="coordo" id="coordo" class="form-control" placeholder="Coordo afficher nom/prenom/mail" disabled>
       <input type="text" name="cfc" id="cfc" class="form-control" placeholder="Cfc afficher nom/prenom/mail" disabled>
    </div>

  7. #27
    Expert éminent
    Je reconnais que j’ai peut-être été un peu trop vite et que je ne t’ai pas donné assez d’éléments pour que tu puisses t’en sortir seul.
    On va éclaircir quelques points&#8239;:

    La fonction de filtrage&#8239;: son rôle est de prendre la liste de toutes les formations (le JSON), et d’y «&#8239;sélectionner&#8239;» la seule formation qu’on veut. Du coup on n’a besoin que d’un seul appel à .filter().

    En se souvenant qu’on a créé nous-mêmes les <option> et qu’on a mis les id de formation dans les value, on peut utiliser cet id pour filtrer. Ça nous permet d’utiliser directement ceSelect.value plutôt que selectedOptions[0].textContent.

    La «&#8239;clé&#8239;» de filtrage, c’est la variable que tu as nommée x. Pour rendre le code un peu plus clair, je propose de renommer cette variable en idFormation.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    const idFormation = ceSelect.value;
    const laFormation = lesFormations.filter((obj) => obj.do === idFormation)[0];


    Le [0] à la fin est important car .filter() renvoie toujours un tableau, même s’il n’y a qu’un seul résultat.

    Une version plus longue mais équivalente serait&#8239;:
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    const formationsFiltrees = lesFormations.filter((obj) => obj.do === idFormation);
    const laFormation = formationsFiltrees[0];


    Le fragment&#8239;: on n’en a pas besoin ici. Il n’est utile que quand on construit plusieurs éléments dans boucle&#8239;; de plus, les éléments existent déjà dans le cas présent.

    Le vidage avec .textContent = ""&#8239;: idem, ce n’est pas utile ici. En plus, ça ne fonctionne pas car on manipule ici des éléments <input> qui n’ont pas de contenu&#8239;; à la place, ils ont une valeur (propriété value).

    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
    function chargerLieuCoordoAss(ceSelect) {
      "use strict";
     
      const lieuFormation      = document.getElementById("lieu");
      const assistantFormation = document.getElementById("assistant");
      const coordoFormation    = document.getElementById("coordo");
      const cfcFormation       = document.getElementById("cfc");
     
      const idFormation = ceSelect.value;
      const formationsFiltrees = lesFormations.filter((obj) => obj.do === idFormation);
      const laFormation = formationsFiltrees[0];
     
      lieuFormation.value      = `${laFormation.cdpost} ${laFormation.ville}`;
      coordoFormation.value    = `${laFormation.an} ${laFormation.ap} ${laFormation.ae}`;
      assistantFormation.value = `${laFormation.cn} ${laFormation.cp} ${laFormation.ce}`;
      cfcFormation.value       = `${laFormation.cfcn} ${laFormation.cfcp} ${laFormation.cfce}`;
    }
    Cette signature n'a pas pu être affichée car elle comporte des erreurs.

  8. #28
    Futur Membre du Club
    C'est génial... tout marche MERCIIIIIIIIIIIIIIIIII infiniment !

    juste une dernière question par rapport a un autre sujet. J'ai une table et cette table je voudrais limiter le nombre de ligne faire un truc du genre



    Voici ma table. il y a bcp trop de ligne...


    je dois utiliser javascript aussi pour le faire ??

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
     <div class="table-responsive-xl">
                <div class="panel monFiltre">
                    <div class="panel-heading pull-left">    
                        <button class="btn btn-default"><a href="index.php?uc=membreGreta&action=ajouterMembre"><i class="material-icons">person_add</i> Ajouter un membre</a></button>  
                        <button class="btn btn-default btn-filtre"><i class="material-icons">filter_list</i> Filtrer</button>
                    </div>
     
                    <table class="table table-striped" style="border:2px solid #00BCD4;">
                        <thead>
                            <tr class="filtre">
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="ID" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Login" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Genre" disabled></span></th> 
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Nom" disabled></span></th> 
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Prenom" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Téléphone" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Email" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Statut" disabled></span></th>
                                <th><span class="bmd-form-group"><input type="text" class="form-control" placeholder="Secteur" disabled></span></th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="row-content">
                            <?php
                                foreach($lesMembres as $unMembre)
                                {
                                $id = $unMembre['id'];
                                $login = $unMembre['login'];
                                $mdp=$unMembre['mdp'];
                                $genre = $unMembre['genre'];
                                $nom = $unMembre['nom'];
                                $prenom = $unMembre['prenom'];
                                $tel = $unMembre['tel'];
                                $email = $unMembre['email'];
                                $statut = $unMembre['statut'];
                                $nomSecteur = $unMembre['nomSecteur'];
                            
                                echo "<tr>
                                        <td>$id</td> 
                                        <td>$login</td>
                                        <td>$genre</td> 
                                        <td>$nom</td>
                                        <td>$prenom</td> 
                                        <td>$tel</td>
                                        <td>$email</td>
                                        <td>$statut</td>
                                        <td>$nomSecteur</td>
                                        <td id='btnAction'>
                                            <button class='btn btn-info btn-round' title='Modifier' data-toggle='modal' data-target='#modifModal_$id'><i class='material-icons'>edit</i></a></button>  
                                            <button class='btn btn-danger btn-round' title='Supprimer' data-toggle='modal' data-target='#$id'><i class='material-icons'>delete_forever</i></button>
                                            </td>
                                        </tr>";
                                }
                            ?>
                        </tbody>
                    </table>
                </div> <!-- fin du panel -->
            </div><!-- fin du responsive -->

  9. #29
    Invité
    Invité(e)
    Bonjour,

    "autre sujet" = nouvelle discussion.