[AJAX] avec 3 listes déroulantes liées php+xhtml+css+javascript+ajax
bonjour,
J'ai une page avec 3 liste déroulantes en xhtml, grâce à javascript et ajax j'arrive à générer du php et afficher une deuxieme liste en fonction de la premiere.
Mon probleme est que je n'arrive pas à afficher une troisieme liste en fonction de la deuxieme, quelle est la piste à suivre svp ?
je me suis appuyé sur ce tuto, j'ai exactement fait la meme chose en adaptant :
http://siddh.developpez.com/articles/ajax/
merci d'avances pour vos réponses, c'est urgent, c'est pour mes projets de développement de fin d'année scolaire.
N.B : le tuto en question montre comment gérer deux listes déroulantes, l'une en fonction de l'autre, mais pas 3, j'ai essayé de suivre le meme cheminement pour afficher une troisieme liste déroulante en fonction de la deuxieme mais ça ne fonctionne pas.
je vous colle le code des mes pages :
*****************************************************************
louer_un_vehicule.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
74
75
76
77
78
79
80
81
82
| <?php
session_start();
if( !isset($_SESSION['login']) || !isset($_SESSION['password']) ){
header('Location: <a href="http://localhost/sitelocavehicules" target="_blank">http://localhost/sitelocavehicules</a> [...] pte.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='ajax.js'></script>
<noscript> <meta http-equiv="Refresh" content="0; URL=http://www.google.fr/support/bin/answer.py?answer=23852"> </noscript>
<link rel="stylesheet" media="screen" type="text/css" href="../design.css" />
<title>Loca'Vehicules site de location de voitures - Louer un Vehicule</title>
</head>
<body onload='cacheLoad()'>
<?php
require("../connexion.php" );
require("../IMG/banniere.php" );
require("../IMG/menu.php" );
?>
<!-- corps -->
<div id="corps">
<h4>Veuillez sélectionner un véhicule dans la liste déroulante, ci-dessous : </h4>
<select name="listeModele" id="listeModele" onchange='go()'>
<option value="-1" selected="selected">Choisissez un modele</option>
<?php
$requete1 = 'select * from MODELE_VEHICULE';
$res1 = mysql_query($requete1);
while($tab1 = mysql_fetch_array($res1)){
echo '<option value=\''.$tab1['NUM_MODELE'].'\'>Modele : '.$tab1['NUM_MODELE'].' | '.$tab1['DESCRIPTION_MODELE'].'</option>';
}
?>
</select>
<div id='formuleDiv'>
<h4>Veuillez sélectionner une des deux formules dans la liste déroulante, ci-dessous : </h4>
<div id='listeFormule'>
<select name='listeFormule' onchange='go2()'>
<option value='-1' selected="selected">Choisissez une formule</option>
</select>
</div>
</div>
<div id='dateHeureLocDiv'>
<p>salut</p>
</div>
<?php //require("../IMG/footer.php" ); ?>
<?php require("../IMG/footer.php" ); ?>
</div>
<!-- fin corps -->
<script type="text/javascript">
document.getElementById("footer" ).style.top = "600px";
document.getElementById("footer" ).style.left = "0px";
</script>
<?php require("../bouton_se_deconnecter.php" ); ?>
</body>
</html> |
*********************************************************
ajax.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
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
| function getXhr(){
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP" );
} catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP" );
}
}
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
xhr = false;
}
return xhr;
}//fin function getXhr()
function go(){
var select = document.getElementById("listeModele" );
var valeur = select.options[select.selectedIndex].value;
if(valeur == -1){
document.getElementById('formuleDiv').style.visibility='hidden';
}else{
document.getElementById('formuleDiv').style.visibility='visible';
}
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('listeFormule').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxModele.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du modele
//alert(valeur);
xhr.send("numModele="+valeur);
}//fin function go()
/*function go2(){
var select2 = document.getElementById("listeFormule" );
var valeur2 = select2.options[select2.selectedIndex].value;
alert(valeur2);
if(valeur2 == -1){
document.getElementById('dateHeureLocDiv').style.visibility='hidden';
}else{
document.getElementById('dateHeureLocDiv').style.visibility='visible';
}
}//fin function go2()
*/
function cacheLoad(){
document.getElementById('formuleDiv').style.visibility='hidden';
//document.getElementById('dateHeureLocDiv').style.visibility='hidden';
}//fin function cacheLoad() |
**************************************************************************
ajaxModele.php
*****************************************************************************
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <?php
echo '<select name=\'listeFormule\'>
<option value=\'-1\' selected=\'selected\'>Choisissez une formule</option>';
if(isset($_POST["numModele"])){
require("../connexion.php" );
$requete2 = 'select NUM_FORMULE, PRIX_LOC
FROM formule
where NUM_MODELE = '.$_POST['numModele'];
$res2 = mysql_query($requete2);
while($tab2 = mysql_fetch_array($res2)){
echo '<option value=\''.$tab2['NUM_FORMULE'].'\'>Formule '.$tab2['NUM_FORMULE'].' : '.$tab2['PRIX_LOC'].' € '; if($tab2['NUM_FORMULE'] == 1){echo "l'heure";}else{echo "la journée";} echo '</option>';
}
}
echo '</select>';
?> |
