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
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 988
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 988
    Points : 6 477
    Points
    6 477

    Par défaut

    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");
    }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  2. #22
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2015
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mars 2015
    Messages : 36
    Points : 7
    Points
    7

    Par défaut

    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
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 988
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 988
    Points : 6 477
    Points
    6 477

    Par défaut

    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 : 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);
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #24
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2015
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mars 2015
    Messages : 36
    Points : 7
    Points
    7

    Par défaut

    ç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 ?

    Nom : Annotation.jpg
Affichages : 18
Taille : 132,9 Ko

    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
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 988
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 988
    Points : 6 477
    Points
    6 477

    Par défaut

    Applique la même méthode : 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é ; 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.)
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  6. #26
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2015
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mars 2015
    Messages : 36
    Points : 7
    Points
    7

    Par défaut

    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

    Nom : Annotation.jpg
Affichages : 12
Taille : 132,9 Ko

    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
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 988
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 988
    Points : 6 477
    Points
    6 477

    Par défaut

    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 :

    La fonction de filtrage : son rôle est de prendre la liste de toutes les formations (le JSON), et d’y « sélectionner » 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 « clé » 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 :
    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 : on n’en a pas besoin ici. Il n’est utile que quand on construit plusieurs éléments dans boucle ; de plus, les éléments existent déjà dans le cas présent.

    Le vidage avec .textContent = "" : 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 ; à 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}`;
    }
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  8. #28
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2015
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : mars 2015
    Messages : 36
    Points : 7
    Points
    7

    Par défaut

    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

    Nom : Annotation.jpg
Affichages : 12
Taille : 132,9 Ko

    Voici ma table. il y a bcp trop de ligne...
    Nom : image.jpg
Affichages : 12
Taille : 155,3 Ko

    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
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 067
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 067
    Points : 30 700
    Points
    30 700

    Par défaut

    Bonjour,

    "autre sujet" = nouvelle discussion.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Existe -t -il des megaframework html-php-ajax-css ?
    Par MtgCmg dans le forum Bibliothèques et frameworks
    Réponses: 0
    Dernier message: 12/12/2010, 09h38
  2. Réponses: 1
    Dernier message: 29/05/2010, 18h22
  3. [AJAX] traitement dynamique d'une zone texte HTML/PHP/AJAX
    Par Hyuge dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 09/07/2008, 09h48
  4. [HTML/PHP/AJAX/JAVASCRIPT/XML/TMX/MYSQL/JAVA] Mémoire de traduction
    Par titoff85 dans le forum Langages de programmation
    Réponses: 0
    Dernier message: 04/08/2007, 08h20
  5. [HTML] Probleme avec les événement OnChange et OnClick
    Par G_Kill dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 04/05/2005, 16h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo