Mise à jour sur événement onchange() d'un <select>

Version imprimable

Voir 40 message(s) de cette discussion en une page

1 pièce(s) jointe(s)

Mise à jour sur événement onchange() d'un <select>

Bonjour à tous,

un petit aperçu avant d'expliquer mon problème

Pièce jointe 464607

en fait voila, dans FORMATION après la sélection ( <select></select>) du SECTEUR j'aimerais afficher les formations qui sont dans le secteur sélectionné pour les mettre dans un autre <select></select>.

Puis après la sélection de la formation j'aimerais afficher le lieu de cette formation dans le <input type="text">.

ainsi que le Nom/Prénom/Émail des personnes qui s'occupent de cette formation dans la carte Email Assistant/Coordo.

c_ecouteClient.php (le controleur de la page)

Code:

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
<?php
 
 include("Vue/accueil/v_menuAccueil.php");
 
 
//action par defaut lorsque ce controleur est demandé
if (!isset($_REQUEST['action'])) {
    $_REQUEST['action'] = 'voirFormEcouteCLient';
}
 
 
$action = $_REQUEST['action'];
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
 
            // $lesFormations = $pdo->getToutLesFormations($nom);
            // $formationParSecteur= $pdo->formationSecteur($idSect);
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
 
}
 
?>

class.pdo.inc.php (connexion a la bdd et les requêtes)

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
class PdoGreta{
 
    private static $serveur='mysql:host=localhost';
    private static $bdd='dbname=greta';
    private static $user='root';
    private static $mdp='' ;
    private static $monPdo;
    private static $monPdoGreta=null;
/**
** Constructeur privé, crée l'instance de PDO qui sera sollicitée
** pour toutes les méthodes de la classe
**/
    private function __construct(){
        PdoGreta::$monPdo = new PDO(PdoGreta::$serveur.';'.PdoGreta::$bdd, PdoGreta::$user, PdoGreta::$mdp);
        PdoGreta::$monPdo->query("SET CHARACTER SET utf8");
    }
 
    public function _destruct(){
        PdoGreta::$monPdo = null;
    }
 
 
/**
   Fonction statique qui crée l'unique instance de la classe
 
   Appel : $instancePdoGreta = PdoGreta::getPdoGreta();
 
   @return l'unique objet de la classe PdoGreta
**/
    public static function getPdoGreta(){
        if(PdoGreta::$monPdoGreta==null){
            PdoGreta::$monPdoGreta= new PdoGreta();
        }
        return PdoGreta::$monPdoGreta;
    }
 
public function getToutLesFormations($nom){
  $req="SELECT formation.id as do,formation.nom as f,fichier,sesconv as nosession,sesnonconv,date_debut,date_fin, recrutement,
    cdpost,ville,effectif,plconv,plnonconv,actconv,actnonconv,level.niveau as lvl,tarif,hcentre,hent,diplm,exp,convention.obj as rep,
    cd,ch,cl,info,secteur.nom as sec,m1.id as idass, m1.nom as an,m1.prenom as ap,m1.tel as at,m1.email as ae,m1.statut as ast,
    m2.id as idcoordo, m2.nom as cn,m2.prenom as cp,m2.tel as ct,m2.email as ce,m2.statut as cs,m3.id as idcfc,m3.nom as cfcn,
    m3.prenom as cfcp,m3.tel as cfct,m3.email as cfce,m3.statut as cfcs
    FROM formation
    JOIN level ON formation.niveau=level.id
    JOIN convention ON formation.convention=convention.id
    JOIN secteur ON formation.secteur=secteur.id
    JOIN membre as m1 ON formation.cfc=m1.id
    JOIN membre as m2 ON formation.ass=m2.id
    JOIN membre as m3 ON formation.coo=m3.id WHERE secteur.nom='$nom'";
    $res = PdoGreta::$monPdo->query($req);
    $form = array();
    $form = $res->fetchAll();
    return $form;
    }
 
public function getLesSecteurs(){
    $req="SELECT id,nom from secteur";
    $res = PdoGreta::$monPdo->query($req);
  $lesLignes = array();
  $lesLignes = $res->fetchAll();
  return $lesLignes;
}
 
public function getIdSecteur(){
    $nomsecteur=$_SESSION['nomSecteur'];
    $req="select id from secteur where nom='$nomsecteur'";
    $res = PdoGreta::$monPdo->query($req);
  $lesLignes = array();
  $lesLignes = $res->fetch();
  return $lesLignes;
 
}<br>}

v_ecouteClient.php

Code:

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
60
61
62
63
64
 <!-- Formation -->
                        <div class="card" style="width: 40rem;">
                            <div class="card-body">
                                <h4 class="card-title">Formation <i class="fa fa-graduation-cap" aria-hidden="true"></i></h4>
 
 
                                <div class='form-group input-group'>
                                    <select name="secteur" id="secteur" onchange="chargerFormation" class='form-control' required>
                                        <option disabled selected>Secteur</option>
                                        <?php
                                            foreach ($lesSecteurs as $unSecteur) {
                                            $id= $unSecteur['id'];
                                            $nom = $unSecteur['nom'];
                                            
                                            echo ("<option value=$id>$nom</option>");
                                        }
                                        ?>
                                    </select>
                                </div>
 
 
 
                                <div class='form-group input-group'>
                                    <select name="formation" id="Idformation" class='form-control'>
                                        <option disabled selected>Formation</option>
                                        <?php
                                        
 
                                            foreach ($lesFormations as $uneFormation) {
                                                $idF = $uneFormation['do'];      
                                                $nomF= $uneFormation['f'];
                                                $ville= $uneFormation['ville'];                                               
                                                $assNom= $uneFormation['an'];
                                                $assPrenom= $uneFormation['ap'];
                                                $assTel= $uneFormation['at'];
                                                $assEmail= $uneFormation['ae'];
                                                $cooNom= $uneFormation['cn'];
                                                $cooPrenom= $uneFormation['cp'];
                                                $cooTel= $uneFormation['ct'];
                                                $cooEmail= $uneFormation['ce'];                                             
                                                $sec= $uneFormation['sec'];
                                                $idass= $uneFormation['idass'];
                                                $idcoordo= $uneFormation['idcoordo'];
                                                
                                                echo("<option value=$idF>$nomF</option>");
                                            }
                                        
                                        ?>
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->
 
                    <script>
                        function chargerFormation() {
                        var x = document.getElementById("secteur").value;
                        document.getElementById("Idformation").innerHTML = "You selected: " + x;
                        }
                    </script>

j'arrive bien a afficher toutes mes formations dans le premier select mais le probleme est que je n'arrive pas a utiliser le select correctement pour afficher le reste dans les autres parties si quelqu'un peut m'aider ça sera vraiment cool car je ne maîtrise pas du tout ajax et comprends peu le js.

merci d'avance !!!

Bonsoir,
Dans ton navigateur, fais Ctrl+U pour voir le code généré. C’est ce code qui est important pour voir ce qui se passe côté client.

D’ailleurs on est sur le forum JavaScript et normalement on ne traite pas de code serveur ici. Mais puisque tu as posté ton PHP, et puisqu’il y a quelques erreurs sévères dedans, je vais quand même en parler.

1. Tu as une vulnérabilité SQL ici :

Code:

$req="select id from secteur where nom='$nomsecteur'";

Je ne sais pas d’où vient la valeur de $_SESSION['nomSecteur'] mais je vais partir du principe qu’elle n’est pas sécurisée. Dans le doute, utilise une requête préparée et tu n’auras pas à te poser la question.

2. Le charset de communication entre PHP et la base SQL :

Code:

SET CHARACTER SET utf8

Cette façon de faire cause 2 problèmes :

Le utf8 de MySQL est en réalité utf8mb3, un encodage incomplet qui n’utilise que 3 octets, et qui peut causer des pertes de données. À la place, il faut utiliser utf8mb4.
ton objet PDO n’est pas au courant de l’encodage utilisé. À la place, il faut ajouter un paramètre d’encodage au dsn lors de la création de la connexion :

Code:

new PDO(PdoGreta::$serveur.';'.PdoGreta::$bdd.';charset=utf8mb4', ...)

3. $_REQUEST : c’est une vieux machin de PHP qui signifie à la fois GET et POST. Mais les verbes http GET et POST n’ont pas la même sémantique, et ta page ne devrait pas répondre aux deux (ou au moins, ne pas répondre de la même façon). Il vaut mieux ne jamais utiliser $_REQUEST, et toujours $_GET ou $_POST suivant la situation.

Pour répondre à ta question, regarde le code que génère ta boucle foreach ($lesFormations as $uneFormation) { ... }. Tu y initialises plein de variables mais tu ne les utilises pas. Tu pourrais par exemple les inscrire dans une balise <script> sous forme d’objet JSON :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <select name="formation" id="Idformation" class='form-control'> <option disabled selected>Formation</option> </select> <script> "use strict"; <?php // 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 ); // écrit le code JavaScript echo "const lesFormations = $json_output;"; ?> </script>
Voir json_encode.

Maintenant, si tu charges ta page, puis ouvres ta console avec la touche F12, puis tapes dans la zone de saisie lesFormations, tu verras quelque chose comme ceci :
Code:

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 >> lesFormations Array(42) [ 0: Object { "do": ... , "f": ... , "ville": ... , "an": ... , "ap": ... , "at": ... , "ae": ... , "cn": ... , "cp": ... , "ct": ... , "ce": ... , "sec": ... , "idass": ... , "idcoordo": ... , }, 1: Object { "do": ... , "f": ... , "ville": ... , "an": ... , "ap": ... , "at": ... , "ae": ... , "cn": ... , "cp": ... , "ct": ... , "ce": ... , "sec": ... , "idass": ... , "idcoordo": ... , }, // etc.
Tu peux filtrer sur la propriété "do" avec la méthode .filter() :

Code:

lesFormations.filter((obj) => obj["do"] === "Poney")[0] // sélectionne la première formation dont l’id est "Poney"

Cela va nous servir à construire une ou plusieurs balises <option> avec les valeurs qui conviennent. Pour ça, il faut modifier la fonction chargerFormation. Mais d’abord, modifions l’attribut onchange pour le rendre un peu plus utile :

Code:

<select ... onchange="chargerFormation(this)" ... >

Ainsi, la fonction reçoit le <select> en argument et on n’a plus besoin de getElementById().

On refait un filtrage, cette fois sur "sec" pour ne garder que les formations qui correspondent au secteur sélectionné, et ensuite on fait une boucle for...of (c’est l’équivalent JS de foreach). Et on utilise createElement() pour construire les <option>.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function chargerFormation(ceSelect) { // supprime l’ancien contenu du select id="Idformation" const selectFormation = document.getElementById("Idformation"); 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); // la syntaxe obj.sec marche aussi for (const formation of secFormations) { const option = document.createElement("option"); option.value = formation.do; option.textContent = formation.f; fragment.appendChild(option); } // ajoute le fragment = ajoute toutes les options d’un coup selectFormation.appendChild(fragment); }
Pour remplir les autres champs, c’est le même principe. N’oublie pas d’ajouter un attribut onchange sur le second select.
Bon courage ;)

1 pièce(s) jointe(s)

Citation:

Envoyé par Watilin

Voir json_encode.

Maintenant, si tu charges ta page, puis ouvres ta console avec la touche F12, puis tapes dans la zone de saisie lesFormations, tu verras quelque chose comme ceci :

Code:

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
>> lesFormations
Array(42) [
  0: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  1: Object {
    "do": ... ,
    "f": ... ,
    "ville": ... ,
    "an": ... ,
    "ap": ... ,
    "at": ... ,
    "ae": ... ,
    "cn": ... ,
    "cp": ... ,
    "ct": ... ,
    "ce": ... ,
    "sec": ... ,
    "idass": ... ,
    "idcoordo": ... ,
  },
  // etc.

Bonjour, merci de m'avoir accordé votre temps !

j'ai corrigé les quelques erreurs que vous m'avez montrés mais j'ai toujours des soucis

voila le résultat que j'obtiens quand j'appelle lesFormations dans la console
Pièce jointe 464794

Puis, dans le <select> quand je choisi le secteur les formations ne s'affiche toujours pas

code html: v_ecouteClient.php

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!-- Formation -->
                        <div class="card" style="width: 40rem;">
                            <div class="card-body">
                                <h4 class="card-title">Formation <i class="fa fa-graduation-cap" aria-hidden="true"></i></h4>
 
 
                                <div class='form-group input-group'>
                                    <select name="secteur" id="secteur" onchange="chargerFormation(this)" class='form-control' required>
                                        <option disabled selected>Secteur</option>
                                        <?php
                                            foreach ($lesSecteurs as $unSecteur) {
                                            $id= $unSecteur['id'];
                                            $nom = $unSecteur['nom'];
                                            
                                            echo ("<option value=$id>$nom</option>");
                                        }
                                        ?>
                                    </select>
                                </div>
 
 
                                <div class='form-group input-group'>
                                    <select  name="formation" id="Idformation" class='form-control'>
                                        <option disabled selected>Formation</option>
 
                                        <script> "use strict"; 
                                        <?php
                                        // 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 );
                                        
                                        // écrit le code JavaScript
                                        echo "const lesFormations = $json_output;";
                                        ?>
                                        
                                        </script>
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->
 
                    <script>
                        // script pour charger les formations contenue dans un secteur (avec le <select>) 
                        function chargerFormation(ceSelect) {
                            // supprime l’ancien contenu du select id="Idformation"
                            const selectFormation = document.getElementById("Idformation");
                            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); // la syntaxe obj.sec marche aussi
                            for (const formation of secFormations) {
                                const option = document.createElement("option");
                                option.value = formation.do;
                                option.textContent = formation.f;
                                fragment.appendChild(option);
                            }
 
                            // ajoute le fragment = ajoute toutes les options d’un coup
                            selectFormation.appendChild(fragment);
                        }
                    </script>

code PHP : c_ecouteClient.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
 
 include("Vue/accueil/v_menuAccueil.php");
 
 
//action par defaut lorsque ce controleur est demandé
if (!isset($_REQUEST['action'])) {
    $_REQUEST['action'] = 'voirFormEcouteCLient';
}
 
 
$action = $_REQUEST['action'];
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
            $lesFormations = $pdo->getToutLesFormations($nom);
 
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
}

code php (requête): class.pdogreta.inc.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public function getToutLesFormations($nom){
  $req="SELECT formation.id as do,formation.nom as f,fichier,sesconv as nosession,sesnonconv,date_debut,date_fin, recrutement,
	cdpost,ville,effectif,plconv,plnonconv,actconv,actnonconv,level.niveau as lvl,tarif,hcentre,hent,diplm,exp,convention.obj as rep,
	cd,ch,cl,info,secteur.nom as sec,m1.id as idass, m1.nom as an,m1.prenom as ap,m1.tel as at,m1.email as ae,m1.statut as ast,
	m2.id as idcoordo, m2.nom as cn,m2.prenom as cp,m2.tel as ct,m2.email as ce,m2.statut as cs,m3.id as idcfc,m3.nom as cfcn,
	m3.prenom as cfcp,m3.tel as cfct,m3.email as cfce,m3.statut as cfcs 
	FROM formation
	JOIN level ON formation.niveau=level.id
	JOIN convention ON formation.convention=convention.id 
	JOIN secteur ON formation.secteur=secteur.id 
	JOIN membre as m1 ON formation.cfc=m1.id
	JOIN membre as m2 ON formation.ass=m2.id
	JOIN membre as m3 ON formation.coo=m3.id WHERE secteur.nom='$nom'";
	$res = PdoGreta::$monPdo->query($req);
	$form = array();
	$form =  $res->fetchAll();  
	return $form;
	}

j'ai encore besoin de vous s'il vous plait (c'est promis j'apprendrais le js :D)

et encore merci pour votre aide !

08/04/2019, 14h10
Watilin
D’après ta capture d’écran, il semblerait que json_encode génère un tableau vide. Essaye ceci et montre-moi ce qui s’affiche :
Code:

1 2 $lesFormations = $pdo->getToutLesFormations($nom); print_r($lesFormations);

Citation:

Envoyé par Watilin

D’après ta capture d’écran, il semblerait que json_encode génère un tableau vide. Essaye ceci et montre-moi ce qui s’affiche :

Code:

1
2
$lesFormations = $pdo->getToutLesFormations($nom);
print_r($lesFormations);

ça me donne toujours le même résultat

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch ($action) {
        case 'voirFormEcouteCLient':{
            //faire une requette. quand je selectionne le secteur cela m'affiche les formations disponibles dans ce secteur
            //pui quand je choisi une formation cela m'affiche le lieu et les membre du greta lier a cette formation
            $lesSecteurs= $pdo->getLesSecteurs();
            $lesMembres = $pdo->getLesMembresGreta();
            $lesFormations = $pdo->getToutLesFormations($nom);
            print_r($lesFormations);
            include("Vue/accueil/v_ecouteClient.php");
            break;
        }
}
 
?>

08/04/2019, 14h49
Watilin

Ctrl+U
Je ne veux pas voir ton code PHP.
08/04/2019, 14h53
joker93200

1 pièce(s) jointe(s)

Pièce jointe 464867

voila ce que ça me donne
08/04/2019, 14h59
Watilin

Ok, il y a des erreurs avec Google Maps et une feuille CSS qui ne charge pas mais ce n’est pas ça qui nous intéresse.
Le print_r devrait afficher un « Array » quelque part dans ta page. C’est ça que je veux voir. Utilise Ctrl+F. Si tu ne trouves rien, il est peut-être caché dans le code source, dans ce cas utilise Ctrl+U (et ensuite Ctrl+F si besoin).
08/04/2019, 15h09
joker93200

1 pièce(s) jointe(s)

Pièce jointe 464880

ça me renvoi un tableau vide
08/04/2019, 15h49
Watilin
Ok, c’est $pdo->getToutLesFormations($nom) qui renvoie un tableau vide.
- Soit il y a un problème avec ta requête SQL ;
- soit il n’y a rien dans la base de données.
Il va falloir commencer par trouver l’origine de ce problème.
Code:

1 2 3 4 ... $form = $res->fetchAll(); print_r($res->errorInfo()); return $form;
Même méthode : trouve le print_r, dans la page ou dans son code source. S’il n’y a que Array () ça veut dire qu’il n’y a pas d’erreur SQL et que la requête retourne un résultat vide. Si tu dois la retravailler, je te conseille de la tester dans PhpMyAdmin ou Adminer avant de l’intégrer dans ton code PHP.

2 pièce(s) jointe(s)

Il n'y a pas d'erreur dans la requête car quand je l’exécute elle marche bien

Pièce jointe 464924

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	public function getToutLesFormations($nom){
		$req="SELECT formation.id as do,formation.nom as f,fichier,sesconv as nosession,sesnonconv,date_debut,date_fin, recrutement,
		cdpost,ville,effectif,plconv,plnonconv,actconv,actnonconv,level.niveau as lvl,tarif,hcentre,hent,diplm,exp,convention.obj as rep,
		cd,ch,cl,info,secteur.nom as sec,m1.id as idass, m1.nom as an,m1.prenom as ap,m1.tel as at,m1.email as ae,m1.statut as ast,
		m2.id as idcoordo, m2.nom as cn,m2.prenom as cp,m2.tel as ct,m2.email as ce,m2.statut as cs,m3.id as idcfc,m3.nom as cfcn,
		m3.prenom as cfcp,m3.tel as cfct,m3.email as cfce,m3.statut as cfcs 
		FROM formation
		JOIN level ON formation.niveau=level.id
		JOIN convention ON formation.convention=convention.id 
		JOIN secteur ON formation.secteur=secteur.id 
		JOIN membre as m1 ON formation.cfc=m1.id
		JOIN membre as m2 ON formation.ass=m2.id
		JOIN membre as m3 ON formation.coo=m3.id 
	WHERE secteur.nom='$nom'";
		$res = PdoGreta::$monPdo->query($req);
		$form = array();
		$form =  $res->fetchAll(); 
 
		print_r($res->errorInfo());
 
		return $form;
		}

Pièce jointe 464927

08/04/2019, 17h09
Watilin

Cherche « Array » dans le code source.
08/04/2019, 17h16
joker93200

Le array n’est pas présent sauf si je place le print_r dans <script> "use strict";
08/04/2019, 18h22
Watilin

Je viens de réaliser un truc : la variable $nom n’est définie nulle part. Normalement ça émet une notice, tu ne l’as pas vue ? Quel est ton niveau d’error_reporting ?
08/04/2019, 18h30
joker93200

Non pourtant ça ne m’as généré aucune erreur j’ai rien vu

2 pièce(s) jointe(s)

j'ai réussi a afficher le tableau dans le code source

Pièce jointe 465385

mais il n'y a toujour rien

Pièce jointe 465386

et voici le code

Code:

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
 <div class="form-group input-group">
                                    <select  name="formation" id="Idformation" class="form-control">
                                        <option disabled selected>Formation</option>
                                        <?php
                                        foreach ($lesSecteurs as $unSecteur) {
                                            $nomSec = $unSecteur['nom'];
 
                                            $lesFormations = $pdo->getToutLesFormations($nomSec);
                                            echo"<script> 'use strict'"; 
                                            // 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);
                                        
                                            // écrit le code JavaScript
                                            echo "const lesFormations = $json_output;
                                            </script>";
                                        }
                                        ?>
 
 
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <input type="text" name="lieu" id="lieu" class="form-control" placeholder="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->
 
                    <script>
                        // script pour charger les formations contenue dans un secteur (avec le <select>) 
                        function chargerFormation(ceSelect) {
                            // supprime l’ancien contenu du select id="Idformation"
                            const selectFormation = document.getElementById("Idformation");
                            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); // la syntaxe obj.sec marche aussi
                            for (const formation of secFormations) {
                                const option = document.createElement("option");
                                option.value = formation.do;
                                option.textContent = formation.f;
                                fragment.appendChild(option);
                            }
 
                            // ajoute le fragment = ajoute toutes les options d’un coup
                            selectFormation.appendChild(fragment);
                        }
                    </script>

Il va falloir qu’on fasse quelques corrections de tir.

Pour commencer, je m’excuse car je n’avais pas bien compris ton besoin dans mon premier message. Je pensais que getToutLesFormations renvoyait la totalité des formations, tous secteurs confondus.

Du coup il va falloir choisir une façon de faire :
:arrow: A. faire une requête SQL de toutes les formations de tous les secteurs, et générer un gros JSON.
:arrow: B. Utiliser ajax.

Vu que tu ne connais pas encore bien JavaScript, on va préférer la méthode A. Elle aura en plus l’avantage de ne pas demander de temps de chargement à chaque fois que le premier <select> est changé.

Donc. Reprenons ta grosse requête SQL avec plein de JOIN, et retirons la clause WHERE.

On va la mettre dans une nouvelle méthode de ta classe pdo.inc.php :
Code:

1 2 3 4 5 6 7 8 9 10 public function getToutesFormationsTousSecteurs() { $req = 'SELECT ... FROM formation JOIN ... JOIN ... JOIN ...'; $res = PdoGreta::$monPdo->query($req); $form = $res->fetchAll(PDO::FETCH_ASSOC); return $form; }
J’utilise la constante PDO::FETCH_ASSOC pour que le résultat ne contienne que les noms colonnes, pas les index. Si tu regardes bien dans ta dernière capture d’écran, chaque résultat est doublé ("do" et "0", "f" et "1", "fichier" et "2", etc.). En utilisant PDO::FETCH_ASSOC, on supprime les index ("0", "1", "2", etc.) et ainsi on divise par 2 la mémoire nécessaire à PHP pour traiter le jeu de résultats.

Dans la vue, on va utiliser getToutesFormationsTousSecteurs pour générer le gros JSON. Ici, on n’utilise pas de boucle foreach. Et pour que le code HTML soit propre, on place la balise <script> en-dehors du <select>.
Également, on va s’assurer un meilleur contrôle des erreurs en testant si le JSON est vide avant de générer le script.
Code:

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 <select name="formation" id="Idformation" class="form-control"> <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>⚠ 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>"; } ?>
Le reste du code JavaScript ne devrait pas avoir besoin de modification.

Essaye déjà ça. Fais attention aux points-virgules et aux guillemets dans le code JavaScript généré.
Sois intelligent dans ta recherche des problèmes : regarde dans la page, dans le code généré, et fais attention à chaque message dans la console.

1 pièce(s) jointe(s)

les donnés sont bien présents comme vous pouvez le voir
Pièce jointe 465535

mais les formations ne s'affichent quand même pas dans le <select> mais juste avant mon option que j'ai rentré manuellement <select name="formation" id="Idformation" class="form-control" ><option disabled selected>Formation</option></select> était bien présent

je sais pas si c'est le onchange() le problème qui est mal placé

Code:

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
<div class='form-group input-group'>
                                    <select name="secteur" id="secteur" onchange="chargerFormation(this)" class='form-control' required>
                                        <option disabled selected>Secteur</option>
                                        <?php
                                            foreach ($lesSecteurs as $unSecteur) {
                                            $idSec= $unSecteur['id'];
                                            $nomSec = $unSecteur['nom'];
                                            $lesFormations = $pdo->getToutLesFormations($idSec);
                                            echo ("<option value=$idSec>$nomSec</option>");
                                        }
                                        ?>
                                    </select>
                                </div>
 
                                <div class="form-group input-group">
                                    <select name="formation" id="Idformation" class="form-control" >
                                        <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="Lieu" >
                                </div>
                            </div>
                        </div>
                    </div> <!-- fin du div formu -->

10/04/2019, 22h12
Watilin

Ok, on progresse.
À ce stade je crois que les captures d’écran ne servent plus à grand chose. Ni le code PHP, d’ailleurs. Après tout, on est sur le forum JavaScript, on ne devrait s’occuper que du code côté client.
Je voudrais que tu me montres le code HTML généré du <select id="secteur">, de préférence sous forme de texte.

Autre chose, juste pour confirmer, peux-tu saisir ceci dans la console et me montrer le résultat ?

Code:

lesFormations.map((f) => ({ sec: f.sec }))

Et enfin, as-tu quelque chose qui apparaît dans la console lorsque tu changes la valeur du select ?

Le code généré avec <select id="secteur"> est

Code:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
   Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=4>Automobile</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=5>Banque</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=6>Batiments</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=3>Commerce</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=9>Communication</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=8>Comptable</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=10>Design</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=11>Energie</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=7>Esthétique</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=12>Formation</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=2>Hotellerie</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=13>Hygiène</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=1>Informatique</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=14>Langue</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=15>Mobilité</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=16>Ressources</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=17>Sanitaire</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=18>Transport</option>Array
(
    [0] => 00000
    [1] => 
    [2] => 
)
<option value=19>VAE</option>

lesFormations.map((f) => ({ sec: f.sec })) me donne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
0: {sec: "Informatique"}
1: {sec: "Hotellerie"}
2: {sec: "Hotellerie"}
3: {sec: "Hotellerie"}
4: {sec: "Hotellerie"}
5: {sec: "Commerce"}
6: {sec: "Automobile"}
7: {sec: "Banque"}
8: {sec: "Batiments"}
9: {sec: "Esthétique"}
10: {sec: "Comptable"}
11: {sec: "Communication"}
12: {sec: "Design"}
13: {sec: "Energie"}
14: {sec: "Formation"}
length: 15
__proto__: Array(0)

Citation:

Et enfin, as-tu quelque chose qui apparaît dans la console lorsque tu changes la valeur du select ?

Non rien n’apparaît (pas de changement dans la console)

Voir 40 message(s) de cette discussion en une page