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

**rob2-9** · 13/11/2006, 09h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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'>
<option value='-1' selected>Choisissez un établissement</option>
</select>
</div>

**denisC** · 13/11/2006, 11h11

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....

**rob2-9** · 13/11/2006, 11h24

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

**denisC** · 13/11/2006, 13h26

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.

**rob2-9** · 13/11/2006, 13h29

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo "<option value='".$row["idvilleetab"]."'>".$row["villeetab"]."</option>";

Merci beaucoup ça m'aide tout plein !!!

**rob2-9** · 13/11/2006, 16h37

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**denisC** · 13/11/2006, 17h20

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?

**rob2-9** · 13/11/2006, 19h04

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.

**denisC** · 13/11/2006, 20h02

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

**rob2-9** · 13/11/2006, 20h11

page ajaxAdresse.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**rob2-9** · 14/11/2006, 08h36

Bonjour,

je voulais savoir ce que tu entends par :

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

**rob2-9** · 14/11/2006, 10h32

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 ?

**denisC** · 14/11/2006, 22h21

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<div id='infoEtab'>
</div>

Et dans change2, change l'id du div à modifier:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**rob2-9** · 17/11/2006, 09h06

Merci pour ton aide.

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

JavaScript

Discussions similaires

Partager

Partager