1 table et 2 listes liées

Version imprimable

07/02/2006, 15h56
Ekik

1 table et 2 listes liées

Bonjour,

J'ai un problème avec les listes déroulantes.

En fait, il s'agit d'une application de reservations en ligne pour un spectacle. Le truc c'est qu'il y a plusieurs spectacle par jours.

Par exemple :

le 22.06.06, y en a un a 17h, 19h et 21h
le 23.06.06, un a 15h, 17h et 19h
le 25.06.06, a 19h et 21h
etc...

J'ai donc ma table spectacle avec 3 colonnes (numero, date, heure) comme ceci:

NUMERO DATE HEURE
1 22.02.06 17h
2 22.02.06 19h
3 22.02.06 21h
4 23.06.06 15h
5 23.06.06 17h
6 23.06.06 19h
7 25.06.06 19h
8 25.06.06 21h

...

J'aimerais pouvoir choisir le jour et l'heure du spectacle via 2 listes déroulantes.
Donc une ou je choisir le jour, puis l'autre m'affiche les heures ou il y a un spectacle ce jour la, sans rechargement de la page si possible.

J'ai essayé plusieurs choses (avec un champs caché, pop-up) mais je n'arrive a rien, pas moyen de rafraichir cette liste pour qu'elle m'affiche les bonnes heures.

J'ai trouvé plusieurs exemple mais qui utilisent 2 tables, je voulais donc savoir si qqn avait une solutions fonctionelle avec 1 seule table.

Merci d'avance.

Cédric
07/02/2006, 16h00
Ben42

regarde du coté d'ajax si tu ne veux pas rafraichir ta page ;)

http://siddh.developpez.com/articles/ajax/
07/02/2006, 16h11
tintin31000

Salut

Le mieux est de passer par du javascript.

Au chargement de la page, tu charges tes listes (dans une fonction javascript) dans des tableaux. Et comme ça quand tu changes de valeur dans ta liste des jours, tu changeras automatiquement tes valeurs dans la liste des heures.

Je te fais la trame :

<script>
function LoadData() // Fonction uniquement appelé au chargement de la page (sur le onload du Body)
{
// Tu récupères toutes tes dates et les heures qui correspondent en les mettant dans un tableau.

}

function DisplayData(id_heure) // fonction qui va afficher tes heures dans ta liste déroulante
{

}
</script>

Dans ton HTML, chaque fois que tu fais un onChange, tu fais appel à la fonction DisplayData

- Ludo -
07/02/2006, 16h14
vg33

Oui, mais si on sélectionne plusieurs jours, la menip est impossible.
Je souscrit pleinement au conseil précédent : AJAX est beaucoup plus simple.
07/02/2006, 16h17
tintin31000

Désolé j'avais pas bien compris ...

Mais si tu avais eu qu'une valeur je ne suis pas persuadé qu'ajax est plus simple ..... et surtout moins couteux ...

Mais je pense qu'il n'en veux qu'une seule ... à la vue de son post ...
07/02/2006, 16h22
Ekik

Merci bcp pour vos réponses rapide!

En fait, il ne serait possible de ne selectionner qu'un seul jour et qu'une seule heure a la fois. Désolé si je me suis mal expliqué.

Donc, pour vous, il serait plus simple de passer par javascript plutot que par ajax si il n'y a qu'un choix possible?

Merci d'avance!

Cédric
07/02/2006, 16h24
Ben42

non je pense qu'AJAX est le mieux, après c'est mon avis personnel.

Dès que tu choisiras un jour tu pourras voir les heures disponibles et en choisir une seule si tu le désires
07/02/2006, 16h25
tintin31000

Beh moi c'est ce que je ferais ...

Si tu as beaucoup d'heure et de jour ça va mettre un peu de temps au chargement mais après ça se fera de façon instatannée dès que tu changeras de jour.

Donc moi j'opterai pour la solution Javascript

- Ludo -
07/02/2006, 16h26
tintin31000

Citation:

Envoyé par Ben42

Dès que tu choisiras un jour tu pourras voir les heures disponibles et en choisir une seule si tu le désires

Et en javascript ça se fait pas bien ça ??? :roll:
07/02/2006, 16h30
Ben42

bien sûr que si n'empêche que je préfère ajax :furieux: :lol:
07/02/2006, 16h45
vg33

Au passage, AJAX, c'est du javascript :D (c'était juste pour rajouter ma pierre !)

Excellent! :D

Non en fait, j'ai essayé de modifier le code qu'il y a sur l'url que Ben42 m'a donné dans son 1er message et ça a l'air de marcher.

Je vous le mets là si jamais.

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
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script language="javascript">
			var xhr = null; 
 
			function getXhr(){
				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; 
				} 
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				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('spec_heure').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxHeure.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 de l'auteur
				sel = document.getElementById('date_spec');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
 
</script>
	</head>
	<body>
				<select name='date_spec' id='date_spec' onchange='go()'>
					<option value='-1'>Jour</option>
					<?
						mysql_connect("localhost","root","");
						mysql_select_db("echaipouses");
						$res = mysql_query("SELECT DISTINCT SP_DATE FROM SPECTACLE ORDER BY SP_DATE");	
						while($row = mysql_fetch_assoc($res)){						
							echo "<option value='".$row["SP_DATE"]."'>".$row["SP_DATE"]."</option>";
						}
					?>
				</select>
				<div id='spec_heure' style='display:inline'>
				<select name='spec_heure'>
					<option value='-1'>Heure</option>
				</select>
				</div>
	</body>
</html>

et l'autre fichier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
	echo "<select name='spec_heure'>";		
	if(isset($_POST["idAuteur"])){
		mysql_connect("localhost","root","");
		mysql_select_db("echaipouses");
		$res = mysql_query("SELECT SP_HEUR FROM SPECTACLE 
			WHERE SP_DATE='".$_POST["idAuteur"]."' ORDER BY SP_HEUR");			
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["SP_HEUR"]."'>".$row["SP_HEUR"]."</option>";
		}
	}
	echo "</select>";

Et ça marche nickel. Je ne sais pas si qu'il en est de la rapidité par rapport a Javascript par contre mais bon, ça me va très bien surtout que c'est un petit projet.

En tout cas, merci beaucoup pour vos réponses rapides et votre débat passionné! :) Je met le tag résolu de ce pas!

Bonne journée!

Cédric