Listes déroulantes liées avec Ajax
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:
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:
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:
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 :)
