Listes déroulantes liées avec Ajax

**ghizlane_dev** · 27/12/2016, 16h20

Bonjour, moi je travaille sur 3 listes deroulantes liées, le souci quand je change la valeur de la premiere par ex la deuxieme ne s'affiche pas,

Ps: j'ai essayé d'afficher par exemple la deuxieme liste dans une autre page php sans ajax juste pour tester le remplissage et ca marche bien

j'ai un fichier categorie.php qui contient la requete qui requpere les données de la deuxieme liste.
index.php qui contient la 1ere liste et les div des 2 autres.
aussi le fichier fonctions.js pour recharger les listes deroulantes voila mon code:
code index.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
<select  id ="equip" name="equip" onchange="cat()">
<option value="">----- choisissez un Equipement ----</option>
<?php 
$requete = "SELECT DISTINCT equipement  FROM equipements  ORDER BY equipement";
$result = pg_query($dbconn,$requete);
while ($row = pg_fetch_assoc($result)) {
echo '<option value="'.$row['equipement'].'"';
if(isset($_POST["equip"]) && $_POST["equip"]==$row['equipement']){echo " selected";}
echo '>'.$row['equipement'].'</option>';	
}
echo '
</select></br>';
?>
 
<div id="bloccategorie">
<?php include('categorie.php'); ?>
</div>
 
<div id="bloclibelle">
<?php include('libelle.php');?>
</div>

code categorie.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
<?php
 
if(isset($_POST["equip"]) && $_POST["equip"] != ""){
$equip = $_POST["equip"];
header('Content-Type: text/html; charset="iso-8859-1"');
?>
<select id="categorie" name="categorie" onchange="libelle()">
    <option value="">-- Catégories--</option>'
 
<?php
$requete_cat = "SELECT distinct categorie FROM equipements WHERE equipement = '".$_POST['equip'] ."' ORDER BY categorie";
$result_cat = pg_query($dbconn,$requete_cat);
 
while ($row_cat = pg_fetch_array($result_cat)) {
echo '<option value="'.$row_cat['categorie'].'"';
if(isset($_POST["categorie"]) && $_POST["categorie"]==$row_cat['categorie']){echo " selected";}
echo '>'.$row_cat['categorie'].'</option>';
}
?>
</select>
<?php } ?>

code fonctions.js

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
//Fonction permettant d'envoyer les categories
function cat(){
 
    //On déclare un objet
    var objet_cat = objet_XMLHttpRequest();
    //On défini ce qu'on va faire quand on aura la réponse
    objet_cat.onreadystatechange = function(){
        //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(objet_cat.readyState == 4 && objet_cat.status == 200){
		// On se sert de innerHTML pour rajouter les options a la liste
            //On envoie la réponse dans le div "bloccategorie"
            document.getElementById('bloccategorie').innerHTML = objet_cat.responseText;
        }
        //côté ajax ça merde
        else{
            //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
            if(objet_cat.status == 404){
                alert('Erreur ' +objet_cat.status + '! Le fichier php semble être absent...');
            }
        }
    }
    //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
    objet_cat.open("POST", "categorie.php" ,false);
    objet_cat.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    sel_equip = document.getElementById('equip');
    equipement = sel_equip.options[sel_equip.selectedIndex].value;
    //envoie
    objet_cat.send("equipement = "+equipement);
 
}

mercii

**NoSmoking** · 28/12/2016, 19h01

Bonjour,
la première des choses à faire est de vérifier ce que te retourne le serveur en mettant par exemple un console.log( obj.responseText) ou de regarder ce qui ce passe dans l'onglet Réseaux de la console.

La deuxième est de mettre le code HTML généré et/ou de mettre une page de test en ligne.

**ghizlane_dev** · 28/12/2016, 23h34

salut,
quand je change la premiere liste le serveur retourne dans la console que le paramètre qui est la valeur de la premiere liste et rien dans les reponses (les valeurs de la deuxieme liste)

**NoSmoking** · 29/12/2016, 10h15

Ton problème est plutôt coté PHP.

Si l'on regarde les données manipulées
coté client

Code :

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

objet_cat.send("equipement = "+equipement);

coté serveur

Code php :

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

if(isset($_POST["equip"]) && $_POST["equip"] != ""){

ou autre

Code php :

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

if(isset($_POST["categorie"]) && $_POST["categorie"]==$row_cat['categorie']){echo " selected";}

De la cohérence nait la lumière !

**ghizlane_dev** · 29/12/2016, 16h26

Oui vous avez raison, le probleme cetait dans php

Code :

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

if(isset($_POST["equip"]) && $_POST["equip"] != ""){

la deuxieme liste s'affiche quand je lai enlevé ce code, mais elle est vide parce que jarrive pas a recuperer la valeur de la premiere liste avec $_POST['equip']

**NoSmoking** · 29/12/2016, 16h32

Oui vous avez raison, le probleme cetait dans php

certes mais pas en le réglant de cette façon !

Coté client tu envoies equipement, c'est donc equipement que tu dois récupérer coté serveur

Code php :

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

1
2
if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
  // etc ...

**ghizlane_dev** · 29/12/2016, 16h41

oui cest ca ce que je faisais avant mais il recupere pas la valeur de la premiere liste du coup il bloquait l'affichage de la deuxieme

voila le code php

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
 
 
<?php
 
if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){
$equip = $_POST["equipement"];
//echo "equipement:".$equip."</br>";
?>
Categorie :
<select id="categorie" name="categorie">
    <option value="">-- Choisissez une Catégorie----</option>'
 
<?php
$requete_cat = "SELECT distinct categorie FROM equipements WHERE equipement ='".$equip ."' ORDER BY categorie";
echo $requete_cat;
$result_cat = pg_query($dbconn,$requete_cat);
 
while ($row_cat = pg_fetch_array($result_cat)) {
echo '<option value="'.$row_cat['categorie'].'"';
echo '>'.$row_cat['categorie'].'</option>';
}
?>
</select>
<?php } ?>

**ghizlane_dev** · 29/12/2016, 16h44

Quand jenleve la ligne

Code :

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

1
2
 
if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){

la deuxieme liste s'affiche mais vide

Invité · 29/12/2016, 16h50

Bonjour,

1/ Dans categorie.php, je ne vois aucun script de connexion.
Pourtant, ce fichier est appelé via ajax, et est donc indépendant (doit être autonome).

2/

Code php :

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

if(isset($_POST["equipement"]) && $_POST["equipement"] != ""){

peut s'écrire...

Code php :

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

if( !empty($_POST["equipement"]) ){

...sauf si 0 (zéro) est une valeur acceptable.

**ghizlane_dev** · 29/12/2016, 17h00

Bonjour jreaux62,

si j'ai la ligne de cnnx au debut juste je lai pas met,
et pour (!empty($_POST["equipement"])), j'ai testé juste if(isset($_POST["equipement"])) pour vooir s'il recupere la valeur ou pas, mais malheureusement il m'affiche rien il n'arrive pas à la récuperer.

par contre avant d'ajouter le code ajax ca marchait bien, il recuperait la premiere valeur et il l'affiche dans la deuxieme liste

**ghizlane_dev** · 29/12/2016, 19h04

je ne sais pas si je peux recuperer la valeur de la premiere liste a partir de la fonction ajax, pour l'avoir dans le fichier php, mais je ne sais pas comment parce que la premiere fois que jutilise ajax

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
 
//Fonction permettant d'envoyer les categories
function cat(){
 
    //On déclare un objet
    var objet_cat = getXhr();
    //On défini ce qu'on va faire quand on aura la réponse
    objet_cat.onreadystatechange = function(){
        //On ne fait quelque chose que si on a tout reçu et que le serveur est ok
        if(objet_cat.readyState == 4 && objet_cat.status == 200){
		// On se sert de innerHTML pour rajouter les options a la liste
            //On envoie la réponse dans le div "bloccategorie"
            document.getElementById('bloccategorie').innerHTML = objet_cat.responseText;
        }
        //côté ajax ça merde
        else{
            //on contrôle le statut. Si 404, le fichier ouvert par "open" n'existe pas
            if(objet_cat.status == 404){
                alert('Erreur ' +objet_cat.status + '! Le fichier php semble être absent...');
            }
        }
    }
    //Ouverture : méthode, fichier, mode (true=asynchrone | false=synchrone)
    objet_cat.open('POST', 'categorie.php' ,true);
    objet_cat.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    sel_equip = document.getElementById('equipement');
    equipement = sel_equip.options[sel_equip.selectedIndex].value;
    //envoie
    objet_cat.send("equipement = "+equipement);
}

**NoSmoking** · 31/12/2016, 08h31

Commence par modifier l'appel à ta fonction de la sorte

Code html :

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

<select  id ="equip" name="equip" onchange="cat( this.value)">

ta fonction devient, simplifiée pour l'occasion

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function cat(param) {
    var oXhr = new XMLHttpRequest();
    oXhr.open('POST', 'categorie.php', true);
    oXhr.onreadystatechange = function () {
        if (oXhr.readyState == 4 && oXhr.status == 200) {
            document.getElementById('bloccategorie').innerHTML = oXhr.responseText;
        }
    }
    oXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    oXhr.send('equipement=' + param);
}

et coté PHP tu peux tester avec un simple print_r ($_POST) ou var_dump($_POST).

**ghizlane_dev** · 31/12/2016, 13h05

ouii maintenant ca marche bien mercii bccp et bonne fete

Listes déroulantes liées avec Ajax

AJAX

Discussions similaires

Partager

Partager