[AJAX] Liste déroulante pour afficher les informations en ajax div ?

Version imprimable

Bonjour,

je débute en ajax et je rencontre un petit problème.

Dans un formulaire php j'ai fait deux listes déroulantes liées. Dans ma première liste j'ai tout un tas de villes. Quand je sélectionne une ville, dans ma deuxième liste j'ai tous les établissements qui sont dans cette ville. Pour alimenter chaque liste je vais chercher des informations dans ma base de données. Tout ceci fonctionne.

J'ai une table ville avec un identifiant et le nom de la ville, et une table établissement avec le code de l'établissement, son nom, l'id de la ville, l'adresse complète, ...

Ce que je voudrais faire maintenant c'est écrire sous ces deux listes le code de l'établissement, son adresse, ..., seulement je ne sais pas trop comment procéder et où mettre le code (c'est-à-dire dans quelle page).

Si quelqu'un pouvais m'aider ça serait sympa.

Merci

PS : voici mon code :

Code de la page ajaxLivre.php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <?php echo "<select name='nometab'>"; if(isset($_REQUEST["idvilleetab"])){ mysql_connect("localhost","root",""); mysql_select_db("boursesadaptation"); $res = mysql_query("SELECT RNE,nometab FROM etab WHERE idvilleetab=".$_REQUEST["idvilleetab"]." ORDER BY nometab"); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["RNE"]."'>".$row["nometab"]."</option>"; } } else echo "<option value='-1'>Choisir un auteur</option>"; echo "</select>"; ?>
Code inséré dans la page php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <label>Ville de l'établissement d'accueil : </label> <select name='villeetab' id='villeetab' onchange='change()'> <option value='-1'>Choisissez une ville</option> <?php mysql_connect("localhost","root",""); mysql_select_db("boursesadaptation"); $res = mysql_query("SELECT * FROM ville ORDER BY villeetab"); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["idvilleetab"]."'>".$row["villeetab"]."</option>"; } ?> </select> <label></label> <br> <br> Nom de l'établissement d'accueil : <div id='nometab' style='display:inline'> <select name='nometab'> <option value='-1' selected>Choisissez un établissement</option> </select> </div>

13/11/2006, 11h11
denisC

Citation:

Envoyé par rob2-9

Ce que je voudrais faire maintenant c'est écrire sous ces deux listes le code de l'établissement, son adresse, ..., seulement je ne sais pas trop comment procéder et où mettre le code (c'est-à-dire dans quelle page).

Je suppose que tu veux faire cela une fois que l'établissement a été selectionné dans la deuxième liste.

Il faut d'abord que tu choisisses si tu veux passer cette information (adresse, code, ...) pour tous les établissements de la ville, au moment du choix de la ville ou si tu preferes ne passer l'info qu'une fois l'etablissement choisit. La première solution permet de se limiter à une seule requete Ajax, la deuxième en nécessite deux (ou plus si tu changes d'établissement).

C'est donc principalement un soucis de volumes (quel est le volume des informations par établissements, y-a t'il beaucoup d'établissements par ville) et d'ergonomie (est-ce que l'utiliisateur est susceptible de changer l'établissement dans la même ville plusieurs fois).

Une fois tout ceci décidé, on pourra voir le code.

Il faudra probablement modifier les deux pages....
13/11/2006, 11h24
rob2-9

Merci pour ton aide.

Je pensais le faire une fois que l'on a sélectionné un établissement dans la ville.

Si l'utilisateur se trompe, il a la possibilité de refaire une sélection dans la liste (mais bon il y a peut-être une autre solution mieux que celle-ci et plus simple).

Sinon j'ai environ 600 établissements dans ma base de données.

Merci
13/11/2006, 13h26
denisC

Citation:

Envoyé par rob2-9

Je pensais le faire une fois que l'on a sélectionné un établissement dans la ville.

Dans ce cas, il suffit de rajouter un autre appel Ajax, sur le onchange du deuxième select, sur le modèle du premier select, ce deuxième appel appellant une autre page PHP qui retournera cette fois ci, non pas un select, mais un fragment HTML dans lequel tu auras l'ensemble des renseignements sur ton etablissement.
13/11/2006, 13h29
rob2-9
ok d'accord.

dans la deuxième page comment mets l'adresse et tout sa parce que ça ne va pas dans un option value comme ceci :
Code:

1 2 echo "<option value='".$row["idvilleetab"]."'>".$row["villeetab"]."</option>";
Merci beaucoup ça m'aide tout plein !!!

En fait j'ai fait une autre page ajaxAdresse.php dans laquelle j'ai mis ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
	//echo "<select name='nometab'>";
	if(isset($_REQUEST["RNE"])){
		mysql_connect("localhost","root","");
		mysql_select_db("boursesadaptation");
		$res = mysql_query("SELECT RNE,nometab, adresseetab, cpetab, villeetab FROM etab WHERE RNE=".$_REQUEST["RNE"]." ORDER BY nometab");
		while($row = mysql_fetch_assoc($res)){
			//echo "<option value='".$row["RNE"]."'>".$row["nometab"]."</option>";
			echo $row["RNE"], " ", $row["nometab"], " ", $row["adresseetab"], " ", $row["cpetab"], " ", $row["villeetab"];
		}
	}
?>

Et dans ma page php où se trouvent mes listes j'ai mis ceci :

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
			function change2()
			{
 
				getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					//alert(xhr.readyState);
					// 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){
						di = document.getElementById('RNE');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxAdresse.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
				RNE = document.getElementById('RNE').options[document.getElementById('RNE').selectedIndex].value;
				//alert(idauteur);
				xhr.send("RNE="+RNE);				
			}

puis ceci :

Code:

1
2
3
4
5
                <div id='nometab' style='display:inline'>
				<select name='nometab' onchange='change2()'>
					<option value='-1' selected>Choisissez un établissement</option>
				</select>
			  </div>

Seulement cela ne fonctionne pas. Quelqu'un pourrait-il me dire d'où vient le problème svp ?

Merci

13/11/2006, 17h20
denisC

Citation:

Envoyé par rob2-9

Seulement cela ne fonctionne pas. Quelqu'un pourrait-il me dire d'où vient le problème svp ?

La page PHP qui génère le nouveau select (celui des etablissements) a aussi pris en compte le nouvel onchange?
13/11/2006, 19h04
rob2-9

En fiat il ne se passe rien de plus avec le code que j'ai rajouté : je peux sélectionné dans mes deux listes mais aucun affichage d'adresse se fait.
13/11/2006, 20h02
denisC

Citation:

Envoyé par rob2-9

En fiat il ne se passe rien de plus avec le code que j'ai rajouté : je peux sélectionné dans mes deux listes mais aucun affichage d'adresse se fait.

Montre toutes les pages, là, j'avoue que je ne vois pas... C'est trop en morceaux :?

page ajaxAdresse.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
 
	//echo "<select name='nometab'>";
	if(isset($_REQUEST["RNE"])){
		mysql_connect("localhost","root","");
		mysql_select_db("boursesadaptation");
		$res = mysql_query("SELECT RNE,nometab, adresseetab, cpetab, villeetab FROM etab WHERE RNE=".$_REQUEST["RNE"]." ORDER BY nometab");
		while($row = mysql_fetch_assoc($res)){
			//echo "<option value='".$row["RNE"]."'>".$row["nometab"]."</option>";
			echo $row["RNE"], " ", $row["nometab"], " ", $row["adresseetab"], " ", $row["cpetab"], " ", $row["villeetab"];
		}
	}
?>

page ajaxLivre.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
	echo "<select name='nometab'>";
	if(isset($_REQUEST["idvilleetab"])){
		mysql_connect("localhost","root","");
		mysql_select_db("boursesadaptation");
		$res = mysql_query("SELECT RNE,nometab FROM etab WHERE idvilleetab=".$_REQUEST["idvilleetab"]." ORDER BY nometab");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["RNE"]."'>".$row["nometab"]."</option>";
		}
	}
	else
		echo "<option value='-1'>Choisir un auteur</option>";
	echo "</select>";
?>

page où se situent les listes déroulantes :

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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
		<script type='text/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 change()
			{
 
				getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					//alert(xhr.readyState);
					// 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){
						di = document.getElementById('nometab');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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
				idvilleetab = document.getElementById('villeetab').options[document.getElementById('villeetab').selectedIndex].value;
				//alert(idauteur);
				xhr.send("idvilleetab="+idvilleetab);				
			}
 
 
 
			function change2()
			{
 
				getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					//alert(xhr.readyState);
					// 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){
						di = document.getElementById('nometab');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxAdresse.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
				RNE = document.getElementById('nometab').options[document.getElementById('nometab').selectedIndex].value;
				//alert(idauteur);
				xhr.send("RNE="+RNE);				
			}
		</script>
 
<form name="formenvoi" method="post" action="monform.php">
 
<label>Ville de l'&eacute;tablissement d'accueil : </label>
 
				<select name='villeetab' id='villeetab' onchange='change()'>
					<option value='-1'>Choisissez une ville</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("boursesadaptation");
						$res = mysql_query("SELECT * FROM ville ORDER BY villeetab");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["idvilleetab"]."'>".$row["villeetab"]."</option>";
						}
					?>
				</select>
				<label></label>
				<br>
				<br>
				Nom de l'&eacute;tablissement d'accueil :
                <div id='nometab' style='display:inline'>
				<select name='nometab' onchange='change2()'>
					<option value='-1' selected>Choisissez un établissement</option>
				</select>
			  </div>
 
</form>

Voilà mon code

14/11/2006, 08h36
rob2-9

Bonjour,

je voulais savoir ce que tu entends par :

Citation:

un fragment HTML dans lequel tu auras l'ensemble des renseignements sur ton etablissement.

Je n'ai pas trouvé sur le net comment cela se présente.

Merci
14/11/2006, 10h32
rob2-9

En fait si j'ai bien compris il faut écrire dans un div seulement je n'arrive pas. Quelqu'un pourrait-il m'aider svp ?
14/11/2006, 22h21
denisC
Citation:

Envoyé par rob2-9

En fait si j'ai bien compris il faut écrire dans un div seulement je n'arrive pas. Quelqu'un pourrait-il m'aider svp ?

Rajoute simplement un div dans ta page du type:
Code:

1 2 3 <div id='infoEtab'> </div>
Et dans change2, change l'id du div à modifier:
Code:

1 2 3 4 5 if(xhr.readyState == 4 && xhr.status == 200){ di = document.getElementById('infoEtab'); di.innerHTML = xhr.responseText; }
Après, il ne te reste plus qu'à faire un minimum de présentation dans ajaxAdresse.php
17/11/2006, 09h06
rob2-9

Merci pour ton aide.