Listes déroulantes imbriquées

**Tif26fany** · 29/07/2019, 10h08

Bonjour !
Je voudrais lier deux listes déroulantes entres-elles. Les listes Poste_source(Id,Nom,ID_UE) et Départ(ID,Nom,ID_UE) pour cela j'ai utiliser de l'Ajax, voici mon code :

Code pour remplir la liste poste source :

Code php :

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
$retour = "";
$requete = "SELECT ID_UE, Nom_poste_source FROM poste_source ORDER BY Nom_poste_source";
$resultat = $mysqli->query($requete);   
 
if ($resultat) {    // si la requête a fonctionné
    if ($mysqli->affected_rows != 0) {   
 
        while ($enreg = $resultat->fetch_row()) {    
            $retour = "<option value='$enreg[0]'>$enreg[1]</option>";
        }
    }
    else {
        $retour = "AUCUNEDONNEE";
    }
}
else {
    $retour = "REQUETE";
}
 
if ("" == $retour) {
    $retour = "NONDETERMINE";
}
 
echo $retour;

code pour remplir la liste départ :

Code php :

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
60
61
62
63
64
65
66
$retour = "";
 
$source = $_POST['source'];
 
$donneesValides = true;
if ('' == $source) {
    $donneesValides = false;
}
else {
    $requete = "SELECT Nom_poste_source FROM poste_source WHERE ID_UE = ?";
    $stmt = $mysqli->prepare($requete);
 
    if ($stmt) {
 
        $stmt->bind_param("i", $source);
        $stmt->execute();
        $stmt->store_result();
 
        if ($stmt->num_rows == 0) {
            $donneesValides = false;
        }
 
        $stmt->close();
    }
    else {
        $retour = "REQUETE";
    }
}
 
if ($donneesValides && '' == $retour) {
 
    $requete = "SELECT Id_depart, Nom_depart FROM depart WHERE ID_UE = ? ORDER BY Nom_depart";
    $stmt = $mysqli->prepare($requete);
 
    if ($stmt) {
 
        $stmt->bind_param("i", $source);
 
        $stmt->execute();
        $stmt->store_result();
 
        if ($stmt->num_rows > 0) {
 
            $stmt->bind_result($Id_depart, $Nom_depart);
 
            while ($stmt->fetch()) {
                $retour .= "<option value='$Id_depart'>$Nom_depart</option>";
            }
        }
        else {
            $retour = "AUCUNEDONNEE";
        }
    }
    else {
        $retour = "REQUETE"
    }
 
    if ("" == $retour) {
        $retour = "NONDETERMINE";
    }
}
else {
    $retour = "PARAMETRE";
}
 
echo $retour;

et enfin mon code principal :

Code html :

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<form method="post">
    <label for="source">Source :</label><select name="source" id="source" required></select>
    <label for="depart">Depart :</label><select name="depart" id="depart" required></select>
    <input type="submit" value="Envoyer" />
</form>
 
<script>
    $(function () {
        remplirSource();
 
        $("#source").change(function (event) {
            remplirSource();
        });
    });
 
    function remplirSource() {
    var jqxhr = $.ajax({
            type: 'get', 
            url: 'generer-options-source.php',
            dataType: "html", 
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data: ""
        })
        .done(function (response, textStatus, jqXHR) {
            if ("REQUETE" == response) {
                $("#source").html("<option value=''>Un problème technique nous empêche de retrouver le poste source (code R).</option>");
            }
            else if ("AUCUNEDONNEE" == response) {
                $("#source").html("<option value=''>Il n'y a actuellement aucun poste source dans le système.</option>");
            }
            else if ("NONDETERMINE" == response) {
                $("#source").html("<option value=''>Un problème technique nous empêche de retrouver la source (code I).</option>");
            }
            else if (response.indexOf('<option') != 0) {
                $("#source").html("<option value=''>Un problème technique nous empêche de retrouver la source (code E).</option>");
            }
            else {
                $("#source").html("<option value=''>Veuillez choisir...</option>" + response);
            }
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            $("#source").html("<option value=''>Un problème technique nous empêche de retrouver le poste source (code A).</option>");
        });
    }
 
    function remplirDepart() {
        var source = $('#source').val();
        var dataString = 'source=' + source;
 
        var jqxhr = $.ajax({
            type: 'post',
            url: 'generer-options-depart.php',
            dataType: "html", 
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            data: dataString
        })
        .done(function (response, textStatus, jqXHR) {
            if ("PARAMETRE" == response) {
                $("#depart").html("<option value=''>Le depart sélectionné n'est pas valide.</option>");
            }
            else if ("REQUETE" == response) {
                $("#depart").html("<option value=''>Un problème technique nous empêche de retrouver les depart (code R).</option>");
            }
            else if ("AUCUNEDONNEE" == response) {
                $("#depart").html("<option value=''>Il n'y a actuellement aucun deprt dans le système.</option>");
            }
            else if ("NONDETERMINE" == response) {
                $("#depart").html("<option value=''>Un problème technique nous empêche de retrouver les departs (code I).</option>");
            }
            else if (response.indexOf('<option') != 0) {
                $("#depart").html("<option value=''>Un problème technique nous empêche de retrouver les departs (code E).</option>");
            }
            else {
                $("#depart").html("<option value=''>Veuillez choisir...</option>" + response);
            }
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            $("#depart").html("<option value=''>Un problème technique nous empêche de retrouver les departs (code A).</option>");
        });
    }
 
</script>

Voilà je n'ai aucun message d'erreur mais rien ne s'affiche dans les listes..

Si vous pouviez m'aider ça serait gentil ! Merci d'avance

Invité · 29/07/2019, 12h07

Bonjour,

manifestement, tu aimes te compliquer la vie...
... et tu fais des erreurs d'inattention.
De plus, les fichiers PHP (appelés via Ajax) sont "indépendants" : il faut y redéfinir la connexion à la base de données !

1- Page principale

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
<form method="post">
    <label for="source">Source :</label><select name="source" id="source" required></select>
    <label for="depart">Depart :</label><select name="depart" id="depart" required></select>
    <input type="submit" value="Envoyer" />
</form>
 
<script>
    $(function (){
        remplirSource();
 
        $("#source").on('change', function(event) {
            remplirDepartFromSource();
        });
    });
 
    function remplirSource() {
		$.ajax({
            type: 'post', 
            url: 'generer-options-source.php',
            dataType: "html", 
            data: ""
        })
        .done(function (response) {
			$("#source").html(response);
        })
        .fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
        });
    }
 
    function remplirDepartFromSource() {
        var source = $('#source').val();
        var dataString = 'source=' + source;
 
        $.ajax({
            type: 'post',
            url: 'generer-options-depart.php',
            dataType: "html", 
            data: dataString
        })
        .done(function (response) {
			$("#depart").html(response);
        })
        .fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
        });
    }
</script>

2- generer-options-source.php

Code php :

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
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
// ICI, il faut ajouter la CONNEXION à la BASE DE DONNEES !
// ..........
 
$retour = "";
$requete = "SELECT ID_UE, Nom_poste_source FROM poste_source ORDER BY Nom_poste_source";
$resultat = $mysqli->query($requete);
 
if ($mysqli->affected_rows != 0)
{
		$retour .= "<option value=''>Veuillez choisir...</option>"."\n";
	while ($enreg = $resultat->fetch_row())
	{
		$retour .= "<option value='$enreg[0]'>$enreg[1]</option>"."\n";
	}
}
else {
		$retour = "<option value=''>Il n'y a actuellement aucun poste source.</option>";
}
 
echo $retour;

3- generer-options-depart.php

Code php :

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
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
// ICI, il faut ajouter la CONNEXION à la BASE DE DONNEES !
// ..........
 
$retour = "";
$source = ( !empty($_POST['source']) )? $_POST['source'] : '';
 
if( !empty($source) )
{
	$requete = "SELECT Id_depart, Nom_depart FROM depart WHERE ID_UE = ? ORDER BY Nom_depart";
	$stmt = $mysqli->prepare($requete);
 
	$stmt->bind_param("i", $source);
	$stmt->execute();
	$stmt->store_result();
 
	if ($stmt->num_rows > 0)
	{
		$retour .= "<option value=''>Veuillez choisir...</option>"."\n";
		$stmt->bind_result($Id_depart, $Nom_depart);
		while ($stmt->fetch())
		{
		$retour .= "<option value='$Id_depart'>$Nom_depart</option>"."\n";
		}
	}
	else {
		$retour = "<option value=''>Il n'y a actuellement aucun depart pour ce poste source.</option>";
	}
}
echo $retour;

N.B.

J'ai enlevé tous les tests (if/else) sans intérêt
A priori, il n'était pas nécessaire de passer par JS/Ajax pour remplir la 1ère liste. On peut le faire directement dans le fichier principal.

**Tif26fany** · 29/07/2019, 13h08

Bonjour,

merci pour la réponse, je vais corriger tout ça

Bonne journée

**Tif26fany** · 30/07/2019, 08h58

Bonjour,

Je reviens ici car j'ai toujours un problème, après avoir mis les codes corrigeaient avec les connections à la bdd, ma première liste s'affiche correctement mais rien dans la deuxième..
Je n'arrive pas à savoir d'où vient l'erreur.

Merci pour l'aide
Bonne journée

Invité · 30/07/2019, 10h09

Bonjour,

Montre tes codes corrigés.

**Tif26fany** · 30/07/2019, 10h35

Bonjour,

Code principal :

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
<form method="post">
    <label for="source">Source : </label><select name="source" id="source" required></select>
    <label for="depart">Depart : </label><select name="depart" id="depart" required></select>
    <input type="submit" value="Envoyer" />
</form>
 
<script>
    $(function (){
        remplirSource();
 
        $("#source").on('change', function(event) {
            remplirDepartFromSource();
        });
    });
 
    function remplirSource() {
		$.ajax({
            type: 'post', 
            url: 'generer-options-source.php',
            dataType: "html", 
            data: ""
        })
        .done(function (response) {
			$("#source").html(response);
        })
        .fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
        });
    }
 
    function remplirDepartFromSource() {
        var source = $('#source').val();
        var dataString = 'source=' + source;
 
        $.ajax({
            type: 'post',
            url: 'generer-options-depart.php',
            dataType: "html", 
            data: dataString
        })
        .done(function (response) {
			$("#depart").html(response);
        })
        .fail(function( jqXHR, textStatus ) {
			alert( "Request failed: " + textStatus );
        });
    }
</script>

Code generer-options-source :

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
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
$mysqli = mysqli_connect ("localhost", "root", "", "base_omaj"); 
$retour = "";
$requete = "SELECT ID_UE, Nom_poste_source FROM poste_source ORDER BY Nom_poste_source";
$resultat = $mysqli->query($requete);
 
if ($resultat)     // si la requête a fonctionné
{
	if ($mysqli->affected_rows != 0)
	{
			$retour .= "<option value=''>Veuillez choisir...</option>"."\n";
		while ($enreg = $resultat->fetch_row())
		{
			$retour .= "<option value='$enreg[0]'>$enreg[1]</option>"."\n";
		}
	}
	else {
			$retour = "<option value=''>Il n'y a actuellement aucun poste source dans le système.</option>";
	}
}
else {
			$retour = "<option value=''>Un problème technique nous empêche de retrouver le poste source (code R).</option>";
}
if ("" == $retour) 
{
			$retour = "<option value=''>Un problème technique nous empêche de retrouver la source (code I).</option>";
}
echo $retour;

et enfin generer-options-depart :

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
<?php
header('Content-type:text/html; charset=UTF-8');	// encodage UTF-8
 
$mysqli = mysqli_connect ("localhost", "root", "", "base_omaj"); 
$retour = "";
$source = ( !empty($_GET['source']) )? $_GET['source'] : '';
 
if( !empty($source) )
{
	$requete = "SELECT ID_UE, Nom_depart FROM depart WHERE ID_UE = ? ORDER BY Nom_depart";
	$stmt = $mysqli->prepare($requete);
	if ($stmt)
	{
		$stmt->bind_param("i", $source);
		$stmt->execute();
		$stmt->store_result();
 
		if ($stmt->num_rows > 0)
		{
			$retour .= "<option value=''>Veuillez choisir...</option>"."\n";
			$stmt->bind_result($ID_UE, $Nom_depart);
			while ($stmt->fetch())
			{
			$retour .= "<option value='$ID_UE'>$Nom_depart</option>"."\n";
			}
		}
		else {
			$retour = "<option value=''>Il n'y a actuellement aucun depart pour cette source.</option>";
		}
	}
	else {
			$retour = "<option value=''>Un problème technique nous empêche de retrouver les depart (code R).</option>"
	}
 
	if ("" == $retour) {
			$retour = "<option value=''>Un problème technique nous empêche de retrouver les departs (code I).</option>";
	}
}
else {
			$retour = "<option value=''>La source sélectionnée n'est pas valide.</option>";
}
echo $retour;

Donc j'ai bien la première liste mais la deuxième est vide même après avoir sélectionner un élément de la première..
Merci

edit : Pour le code générer option départ, à la ligne 6 c'est des post et non des get, j'ai oublié de corriger

Listes déroulantes imbriquées [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager