Faire des SELECT dépendants

**mouls22** · 17/02/2022, 15h54

Bonjour, je sollicite votre aide car j'essaie de lier mes deux SELECT quartier et sousquartier. Je n'arrive pas à voir le problème, rien ne s'affiche dans la console.
C'est toujours les sousquartiers du 1er quartier qui s'affichent
Ma table quartiers est de la forme suivante:

id	id_parent	quartier_fr	quartier_en
1	0	quartier1	quartier1
2	0	quartier2	quartier2
3	0	quartier3	quartier3
4	0	quartier4	quartier4
...
101	1	sous-quartier1	sous-quartier1
102	1	sous-quartier2	sous-quartier2
...
201	2	sous-quartier4	sous-quartier4
202	2	sous-quartier5	sous-quartier5
...

Voici le code dans la page formannonce.php (se trouvant dans le dossier principales):

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
<head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
       <script src='/jquery-3.6.0.js'> </script>
 
       <script>
        $(document).ready(function(){
$('#quartier').on('change',function(){
var quartierID= $(this).val();
if(quartierID){
 $.getJSON("/principales/ajax.php",{quartier:quartierID}, function(result){
    console.log('reponse ajax',result);
    $.each(result, function(i, el){
      $("#sousquartier").append("<option value='"+el.id+"'>"+el.qua+"</option>");
      }); // ferme le each
    }); // ferme le getJson
  } // ferme le if
}); // ferme le on change
        });
</script>
//...suite 
//Pour les select:
<div id= "c">
 
             <span><label for="quartier"><?php echo $lang['quartier'];?></label></span> <br>
                <select id="quartier" onchange="choisirsous()" name="quartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           // 1- on récupère les quartiers principaux
$quartiers = getQuartier( 0 );
$sousquartiers = getQuartier( $quartiers[0]['id'] );   
 
if($quartiers){
              foreach($quartiers as $quart){
 
 
 
 echo "<option value='".$quart['id']."'>".$quart['qua']."</option>";
 
   
 }
 ?>
 
</select>
<br> <br>
</div>
 
<div id="d">
 
<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           
 
              foreach($sousquartiers as $sq){
 
 
 
 echo "<option value='".$sq['id']."'>".$sq['qua']."</option>";
 
}
 
 
}//fin accolade if $quartiers
      
 ?>
 
</select>
 
</div>

Et d'autre part la page ajax.php dans le dossier principales:

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
<?php
include "../cnx.php";
function getQuartier( $id_parent=0 )
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, id_parent, quartier_".$sql_lang." AS qua
 FROM quartiers
 WHERE id_parent = :id_parent
 ORDER BY id
 ";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_parent'=>$id_parent) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}
 
 
$q = !empty($_GET['quartier']) ? $_GET['quartier'] : NULL;
if(isset($q)){
    $sousquartiers = getQuartier( $q);   
    echo json_encode( $sousquartiers ) ;
   exit;
}
 
?>

Le fichier jquery-3.6.0 est dans aucun dossier, c'est pourquoi j'ai mis un / dans <script src=

Auriez-vous une solution?

**NoSmoking** · 18/02/2022, 11h54

Bonjour,
je pense que pour commencer il te faudrait mettre de l'ordre dans ton code, tout est mélangé HTML/PHP/JS.

Tu as définies où ta fonction choisirsous() qui se trouve dans ta balise <select>, elle est d'autant inutile que tu as définie un observateur sur cet élément en jQuery.

Dans la logique il te faudrait :

au chargement afficher uniquement le choix du quartier, sans présélection pour que le onchange soit opérationnel ;
au changement, tu vas interroger ta base et tu remplaces le contenu de ton deuxième <select>.

Un conseil, n'hésite pas à regarder le code HTML généré.

**mouls22** · 18/02/2022, 12h26

Bonjour NoSmoking et merci pour ta réponse. Pour la fonction choisirsous(), elle est dans la page formannonce.php, et elle marche également.

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
function choisirsous()
{
  var sous= document.getElementById("quartier");
 
 
 
  if(sous.value >= 1 )
  {
    console.log('yes');
    document.getElementById("d").style.display="block"; 
 
}
else{
  console.log('no');
  document.getElementById("d").style.display="none"; 
 
}
 
 
}

<<elle est d'autant inutile que tu as définie un observateur sur cet élément en jQuery.>>
=> Est-ce la raison pour laquelle le jquery ne marche pas, que rien ne s'affiche dans console log?

<<Dans la logique il te faudrait :
au chargement afficher uniquement le choix du quartier, sans présélection pour que le onchange soit opérationnel ;
au changement, tu vas interroger ta base et tu remplaces le contenu de ton deuxième <select>. >>

=> Peux-tu donner un exemple, please?

**mouls22** · 18/02/2022, 18h55

En fait je me suis compliqué la vie avec une seule table, j'ai donc fait 2
table quartierss:

id	quartier_fr	quartier_en
1	quartier1	quartier1
2	quartier2	quartier2
etc.

Table sousquartiers:

id	id_quartier	sousquartier_fr	sousquartier_en
1	1	sousquartier1	sousquartier1
2	1	sousquartier2	sousquartier2
3	2	sousquartier3	sousquartier3
etc.

La page formannonce.php:

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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 
       <script src='/jquery-3.6.0.js'> </script>
 
       <script>
        $(document).ready(function(){
$('#quartier').on('change',function(){
var quartierID= $(this).val();
if(quartierID){
 $.get("/principales/ajax.php",
 {quartier:quartierID}, 
 function(result){
    console.log('reponse ajax',result);
    $('#sousquartier').html(result);
      
      } 
); 
  } 
        });
      });
 
</script>
 
//...suite
 
<div id= "c">
 
             <span><label for="quartier"><?php echo $lang['quartier'];?></label></span> <br>
                <select id="quartier" onchange="choisirsous()" name="quartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
              <?php
              
           // 1- on récupère les quartiers principaux
$quartiers = getQuartier();     
              foreach($quartiers as $quart){
 
 
 
 echo "<option value='".$quart['id']."'>".$quart['qua']."</option>";
              }
 
 
 ?>
 
</select>
<br> <br>
</div>
 
<div id="d">
 
<span><label for="sousquartier"><?php echo $lang['quartier'];?>2</label></span> <br>
                <select id= "sousquartier" name="sousquartier">
                <option value="" disabled selected><?php echo $lang['quartier'];?></option>
 
 
</select>
 
</div>

et ici la page ajax.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
33
34
35
36
37
38
39
40
41
42
include "../cnx.php";
function getSousQuartier($id_quartier)
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en','ar']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, quartier_".$sql_lang." AS sousqua
 FROM quartierss
 WHERE id_quartier:id_quartier
 ORDER BY id
 ";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_quartier'=>$id_quartier) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}
 
 
$id_quartier = $_GET['quartier'];
 
if(isset($id_quartier)){
    $sousquartiers = getQuartier($id_quartier);   
 
 
    foreach($sousquartiers as $SQ){
 
 
 
      echo "<option value='".$SQ['id']."'>".$SQ['sousqua']."</option>";
                   }
 
                  }
 
?>

En console log lorsqu'on choisit un quartier:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
reponse ajax <br />
<font size='1'><table class='xdebug-error xe-uncaught-exception' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Fatal error: Uncaught Error: Call to undefined function getQuartier() in C:\wamp64\www\Projetsite\principales\ajax.php on line <i>31</i></th></tr>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Error: Call to undefined function getQuartier() in C:\wamp64\www\Projetsite\principales\ajax.php on line <i>31</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0023</td><td bgcolor='#eeeeec' align='right'>366448</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\Projetsite\principales\ajax.php' bgcolor='#eeeeec'>...\ajax.php<b>:</b>0</td></tr>
</table></font>

Au moins avec deux tables nous avons une réponse ajax.
Mais où est le grain de sable?

**NoSmoking** · 19/02/2022, 07h43

Au moins avec deux tables nous avons une réponse ajax.
Mais où est le grain de sable?

ta réponse Ajax te signale simplement une erreur dans ton code serveur :

( ! ) Fatal error: Uncaught Error: Call to undefined function getQuartier() in C:\wamp64\www\Projetsite\principales\ajax.php on line 31

A corriger avant de conclure

**mouls22** · 19/02/2022, 14h52

Ah oui d'accord, c'est getSousQuartier() qu'il fallait faire. Maintenant ça marche:

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
function getSousQuartier($id_quartier)
{
   global $bdd;
 
   $sql_lang = (!empty(($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr','en']) ))? $_SESSION['lang'] : 'fr'; // on s'assure que la langue est correcte
 
   $sql = "SELECT id, id_quartier, sousquartier_".$sql_lang." AS sousqua
 FROM sousquartiers
 WHERE id_quartier=:id_quartier
 ORDER BY id
 ";
 
   try{
      $req = $bdd->prepare($sql);
      $req->execute( array(':id_quartier'=>$id_quartier) ); 
      $res =  $req->fetchAll(PDO::FETCH_ASSOC);
    }catch(Exception $e){
      echo "Erreur dans la requête " . $sql;
      $res = false;
    }
 
   return $res;
}
 
 
$id_quartier = $_GET['quartier'];
 
if(isset($id_quartier)){
    $sousquartiers = getSousQuartier($id_quartier);   
 
 
    foreach($sousquartiers as $SQ){
 
 
 
      echo "<option value='".$SQ['id']."'>".$SQ['sousqua']."</option>";
                   }
 
                  }
 
?>

Mais pourquoi en bdd, dans la table annonces, le champ id_sousquartier est le même que qu' id-quartier. Exemple si id_quartier= 7, donc id_sousquartier aussi.
Est- ce à cause que l'ajax est en get et mon formulaire est en methode POST ?
NB: Quand on choisit un quartier, son sousquartier s'affiche correctement.

La console:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
reponse ajax <br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: _SESSION in C:\wamp64\www\Projetsite\principales\ajax.php on line <i>7</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.1454</td><td bgcolor='#eeeeec' align='right'>366448</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\Projetsite\principales\ajax.php' bgcolor='#eeeeec'>...\ajax.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.1473</td><td bgcolor='#eeeeec' align='right'>382168</td><td bgcolor='#eeeeec'>getSousQuartier(  )</td><td title='C:\wamp64\www\Projetsite\principales\ajax.php' bgcolor='#eeeeec'>...\ajax.php<b>:</b>31</td></tr>
</table></font>
<option value='25'>Sousquartier 1</option><option value='26'>Sousqurtier 2</option>

**NoSmoking** · 20/02/2022, 09h37

Il faut que tu lises et interprètes les messages d'erreurs :

( ! ) Notice: Undefined variable: _SESSION in C:\wamp64\www\Projetsite\principales\ajax.php on line 7

teste tes pages en mettant l'adresse de celle-ci directement dans la barre d'adresse du navigateur avec les paramètres que tu veux.

Mais pourquoi en bdd, dans la table annonces, le champ id_sousquartier est le même que qu' id-quartier. Exemple si id_quartier= 7, donc id_sousquartier aussi.
Est- ce à cause que l'ajax est en get et mon formulaire est en methode POST ?

C'est toi le maître d'oeuvre concernant ta base, à toi donc de la faire la plus pertinente possible.

Concernant les GET et POST il faut bien sûr qu'il y ait cohérence entre client et serveur. Si tu demandes du GET, via Ajax, il te faut lire la requête en GET idem pour PUT.

**mouls22** · 21/02/2022, 23h45

ça a marché, il y avait des erreurs dans le code source plus la variable $id_sousquartier que j'avais omis.
Merci encore

Faire des SELECT dépendants

AJAX

Discussions similaires

Partager

Partager