[AJAX] liste deroulante et recuperation de valeur

Version imprimable

Quand on clique sur une date, dans heure debut il est censé s'afficher les heures correspondantes. Mais rien ne s'affiche, a part si dans la requete du fichier heuredebut.php, on met une variable au lieu de recuperer la selection du jour. Il y aurait donc un probleme de recuperation de la valeur 'jour' selectionnée dont on se sert dans la requete apres. Mais je ne vois po où est l'erreur, jai juste adapté le code d'ici http://siddh.developpez.com/articles/ajax/

ajoutacti.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
83
84
85
86
87
88
89
 
<html>
	<head>
		<title>Ajout dans le planning</title>
		<script type='text/javascript'>
 
			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;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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('heuredebut').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","heuredebut.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 jour
				sel = document.getElementById('jour');
				idjour = sel.options[sel.selectedIndex].value;
				xhr.send("idJour="+idjour);				
			}
</script>
	</head>
	<body>
	<center>
		<form >
			<fieldset style="width: 500px" style="height:800px"style="font-size:26">
				<legend>Ajout dans le planning</legend><br>
				<label>Jour : </label><br>
				<select name='Jour' id='jour' onchange='go()' size="2" style="font-size:18" style="width: 200px" >
					<option value='-1'>Aucun</option>
					<option value="lundi">Lundi </option>
					<option value="mardi">Mardi </option>
					<option value="mercredi">Mercredi </option>
					<option value="jeudi">Jeudi </option> 
					<option value="vendredi">Vendredi </option>
					<option value="samedi">Samedi </option>
					<option value="dimanche">Dimanche </option>
				</select> <br><br>
				<label>Heure debut : </label><br>
				<div id='heuredebut' style='display:inline'>
				<select name='heuredebut' size="10" style="font-size:18"   style="width: 200px" >
					<option value='-1'>Choisir un jour</option>
				</select>
				</div>
				<br><br><label>Heure fin : </label><br>
				<div id='heurefin' style='display:inline'>
				<select name='heurefin' size="10" style="font-size:18" style="width: 200px" >
					<option value='-1'>Choisir un jour</option>
				</select>
				</div>
				<br><br>
				</form>
				<form method="post" action="ajoutacti.php">
				<input type="submit" value="Ajouter" name="ajouter" style="font-size:22">
				<input type="button" value="Retour" name="retour" style="font-size:22">
			</fieldset>
		</form>
	</center>
	</body>
</html>

heuredebut.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
	echo "<select name='heuredebut'>";
	if(isset($_POST["idJour"])){
		mysql_connect("localhost","root","") or die("Mysql connect error");
		mysql_select_db('reservation');
		$res = mysql_query("SELECT * FROM creneau 
			WHERE jour_creneau=".$_POST['idJour']." ORDER BY id_creneau;")
			or die ('Erreur sql!'.$res.'<br/>'.mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_creneau"]."'>".$row["hdebut_creneau"]."</option>";
		}
	}
	echo "</select>";
?>

14/01/2011, 12h43
andry.aime

Bonjour,

Citation:

WHERE jour_creneau=".$_POST['idJour']." ORDER BY id_creneau

Code:

WHERE jour_creneau='".$_POST['idJour']."' ORDER BY id_creneau

A+.
14/01/2011, 13h42
caro71ol

cela affiche toujours une liste deroulante vide!
14/01/2011, 13h47
andry.aime

Re,

Tu as les valeurs "lundi, mardi, mercredi..." dans le champ jour_creneau?

Sinon essaie de faire une alert à la place de l'innerHTML pour voir ce que ça retourne.

A+.
14/01/2011, 14h20
caro71ol

la table est remplie.

euh et on fait ca comment?
désoler je debute dans ses langages.

Code:

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
alert(leselect);						document.getElementById('heuredebut').innerHTML = leselect;
					}

14/01/2011, 15h55
caro71ol

1 pièce(s) jointe(s)

cela m'affiche cela

Fait un echo de la valeur postée pour voir :?.

Code:

1
2
echo "Jour :".$_POST["idJour"];
echo "<select name='heuredebut'>";

Code:

1
2
var sel = document.getElementById('jour');
var idjour = sel.options[sel.selectedIndex].value;

14/01/2011, 16h32
caro71ol

1 pièce(s) jointe(s)

cela affiche :

Code:

<select name='Jour' id='Jour' onchange='go()'
Code:

1 2 3 var sel = document.getElementById('Jour'); var idjour = sel.options[sel.selectedIndex].value; alert (idjour);

17/01/2011, 08h20
caro71ol

1 pièce(s) jointe(s)

donc on obtient ceci un message avec le jour selectionné et le jour saffiche a côté de la liste deroulante heure debut
17/01/2011, 16h02
andry.aime

Bonjour,
Si le jour s'affiche avant le select, c'est que la variable est bien envoyée. Le problème vient de la requête sql ou code php.
La fonction Ajax fonctionne alors.

A+.

j'ai testé avec le code suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
echo "Jour :" .$_POST["idJour"];
	echo "<select name='heuredebut' >";
	if(isset($_POST['idJour'])){
	$jour=$_POST['idJour'];
	echo $jour;
		mysql_connect("localhost","root","") or die("Mysql connect error");
		mysql_select_db('reservation');
		$res = mysql_query("SELECT * FROM creneau 
			WHERE jour_creneau=' " .$_POST['idJour']. " ' ORDER BY id_creneau;")
			or die ('Erreur sql!'.$res.'<br/>'.mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_creneau"]."'>".$row["hdebut_creneau"]."</option>";
		}
	}
	echo "</select>";
?>

le premier echo s'affiche mais pas le deuxieme!

Avec ce test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
echo "Jour :" .$_POST["idJour"];
	echo "<select name='heuredebut' >";
 
	$jour=$_POST['idJour'];
	echo $jour;
		mysql_connect("localhost","root","") or die("Mysql connect error");
		mysql_select_db('reservation');
		$res = mysql_query("SELECT * FROM creneau 
			WHERE jour_creneau=' " .$_POST['idJour']. " ' ORDER BY id_creneau;")
			or die ('Erreur sql!'.$res.'<br/>'.mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_creneau"]."'>".$row["hdebut_creneau"]."</option>";
		}
 
	echo "</select>";
?>

c'est la même chose!

18/01/2011, 08h24
caro71ol
si je mets une variable à la place, j'ai un affichage dans heure debut.
Code:

1 2 $res = mysql_query("SELECT * FROM creneau WHERE jour_creneau='lundi' ORDER BY id_creneau;")

j'ai tenté ceci et ca a l'air de fonctionner :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
	echo "<select name='heuredebut' >";
	if(isset($_POST["idJour"])){
	$jour=$_POST["idJour"];
 
		mysql_connect("localhost","root","") or die("Mysql connect error");
		mysql_select_db('reservation');
		$res = mysql_query("SELECT * FROM creneau 
			WHERE jour_creneau='$jour' ORDER BY id_creneau;")
			or die ('Erreur sql!'.$res.'<br/>'.mysql_error());
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id_creneau"]."'>".$row["hdebut_creneau"]."</option>";
		}
	}
	echo "</select>";
?>

merci encore