[AJAX] interaction entre listes déroulantes qui ne fonctionne pas

**ballantine's** · 30/03/2010, 11h02

Bonjour,

je souhaite faire intéragir deux listes déroulantes que j'alimente à partir des requetes SQL.

J'ai une première liste déroulante qui me donne une liste de site et je souhaiterais que ma deuxième liste me retroune la liste des équipes du site sélectionné.

Pour cela je fais dans mon select un submit du formulaire:

Code :

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

1
2
 
<select name="crc" class="inputRecherche12pxSelect largeurSelectRecherche" onChange="JavaScript:document.form_ajout.submit();" >

mais rien ne se passe. j'ai une autre fonction javascrpipt qui vérifie au moment de la validation de mon fomulaire que l'utilisateur a bien remplis tous les champs. cela peut il être lié?

Je ne vois pas trop comment faire.

Merci de votre aide.

**andry.aime** · 30/03/2010, 11h11

Bonjour,
Listes liées

http://www.developpez.net/forums/d59...s-liees-entre/

A+.

**thom48** · 30/03/2010, 11h18

Bonjour,

Je te conseille d'aller voir ce site.

http://siddh.developpez.com/articles/ajax/#LIV-A

Il m'a aidé

thomas

**ballantine's** · 30/03/2010, 11h39

Et bien j'ai rempris l'exemple qui est dans le lien que vous m'avez proposé mais rien ne se passe.

Voici les fonctions appliquées à mon cas :

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
 
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('equipe').innerHTML = leselect;
	}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_agent.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 crc
	sel = document.getElementById('crc');
	idcrc = sel.options[sel.selectedIndex].value;
	xhr.send("crc="+idcrc);
}

et j'apelle la fonction dans le select de mes sites :

Code :

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

1
2
 
<select name="crc" id="crc" class="inputRecherche12pxSelect largeurSelectRecherche" onChange="go();" >

Voici ce que j'ai dans mon fichier ajax_agent.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
21
22
23
 
<h3>Equipe : 
<select name="equipe" id="equipe" class="inputRecherche12pxSelect largeurSelectRecherche">
<option />
<?php
								//On va chercher dans la base tous les sites existant:
								$requete_site = "SELECT DISTINCT code_equipe,nom_equipe from equipes where crc = '".$_POST['crc']."' order by nom_equipe";
								$result_site = mysql_query($requete_site);
 
								//Pour chaque site trouvé dans la base, on affiche la possibilité de le choisir et si c'est le critére de recherche on l'affiche
								while ($tab_site = mysql_fetch_array($result_site)) 
									{
									if($tab_site['site']!="")
										{
										echo "<option";
										if($result['site']==$tab_site['site'])echo " selected=\"selected\"";
										echo ">".$tab_site['site']."</option>";
										}
									}
 
?>
</select>
</h3>

Merci de votre aide

**andry.aime** · 30/03/2010, 11h59

Re,
1-

document.getElementById('equipe').innerHTML = leselect;

<select name="equipe" id="equipe"

Tu doits utiliser un conteneur (un div par exemple) pour mettre ton select lequel tu mets à jour avec AJAX car un select ne supporte pas innerHTML sous IE. Si t'as bien lu le tutoriel, tu aurais bien pu l'appercevoir.

2-Montres nous le code HTML généré.

**ballantine's** · 30/03/2010, 12h15

Pour le petit 1 j'ai modifié selon tes conseils, même chose pour le 2 j'ai ajouté des div.

Pour ce qui est du code généré, c'est le code source que tu veux?si oui, le voici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<p><h3>CRC : 
<select name="crc" id="idcrc" class="inputRecherche12pxSelect largeurSelectRecherche" onChange="go();" >
<option value='-1'>Aucun</option>
<option value="CRC_ANGOULEME">Crc Angouleme</option><option value="3">Crc Bordeaux Simm Pro</option><option value="2">Crc Tours/blois Qe</option><option value="1">Crc Tours/blois Simm Part</option><option value="zc">Zone Centre</option><option value="zn">Zone Nord</option><option value="zo">Zone Ouest</option>	
</select></h3>
</p><p><div>
<h3>Equipe : 
<select name="equipe" id="idequipe" class="inputRecherche12pxSelect largeurSelectRecherche">
<option value='-1'>Choisir un crc</option>
</select>
</h3></div></p><br/>

le code dans mon fichier :

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
 
<p><h3>CRC : 
<select name="crc" id="idcrc" class="inputRecherche12pxSelect largeurSelectRecherche" onChange="go();" >
<option value='-1'>Aucun</option>
<?php
								//On va chercher dans la base tous les agents:
								$requete_crc = "SELECT num_crc,nom_crc from crc order by nom_crc";
								connect_BD();
								$result_crc = mysql_query($requete_crc);
 
								//on va chercher le nni du responsable
								while ($tab_resp = mysql_fetch_array($result_crc)) 
									{
									if($tab_resp['nom_crc']!="")
										{
										echo "<option value=\"".$tab_resp['num_crc']."\"";
										echo ">".trim(formater_nom($tab_resp["nom_crc"]))."</option>";
										}
									}
								?>
</select></h3>
</p><p><div>
<?php echo $_POST['crc']; ?>
<h3>Equipe : 
<select name="equipe" id="idequipe" class="inputRecherche12pxSelect largeurSelectRecherche">
<option value='-1'>Choisir un crc</option>
</select>
</h3></div></p>

merci beaucoup

**andry.aime** · 30/03/2010, 12h20

Code HTML :

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

1
2
3
4
5
6
<div id="idDiv">
<h3>Equipe : 
<select name="equipe" id="idequipe" class="inputRecherche12pxSelect largeurSelectRecherche">
<option value='-1'>Choisir un crc</option>
</select>
</h3></div>

Code :

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

1
2
3
leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('idDiv').innerHTML = leselect;

**ballantine's** · 30/03/2010, 13h40

j'ai appliqué ta méthode et ma liste des équipes reste vide

**andry.aime** · 30/03/2010, 13h46

Mets un alert pour voir le resultat de la requête AJAX.

Code :

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

1
2
3
4
var leselect = xhr.responseText;
	// On se sert de innerHTML pour rajouter les options a la liste
	alert(leselect);
	document.getElementById('idDiv').innerHTML = leselect;

**ballantine's** · 30/03/2010, 13h51

et bien rien ne s'affiche... il y a un truc qui va pas

**andry.aime** · 30/03/2010, 13h56

L'id du select.

sel = document.getElementById('crc');

Code :

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

var sel = document.getElementById('idcrc');

**ballantine's** · 30/03/2010, 14h07

pas de changement

**andry.aime** · 30/03/2010, 14h11

Tu peux nous montrer ton code javascript et HTML actuel?

**ballantine's** · 30/03/2010, 14h12

même quand je fais un simple :

Code :

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

1
2
 
alert("bug");

dans la fonction go(); rien ne s'affiche. cela donne l'impression que je ne passe jamais par la fonction go();

**ballantine's** · 30/03/2010, 14h17

ma partie javascript complète, la première fonction est appelée au moment de la validation du formulaire :

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
 
<script type="text/javascript" language="javascript">
function Valider()
{
	if(document.form_ajout.prenom.value=="")
	{alert("Vous n'avez pas saisi de prénom")
	document.form_ajout.prenom.focus();
	return false;
	}
	if(document.form_ajout.nom.value=="")
	{alert("Vous n'avez pas saisi de nom")
	document.form_ajout.nom.focus();
	return false;
	}
	if(document.form_ajout.nni.value=="")
	{alert("Vous n'avez pas saisi de nni")
	document.form_ajout.nni.focus();
	return false;
	}
	if(document.form_ajout.mdp.value=="")
	{alert("Vous n'avez pas saisi de mot de passe")
	document.form_ajout.mdp.focus();
	return false;
	}
	if(document.form_ajout.entite.value=="")
	{alert("Vous n'avez pas sélectionné d'entité")
	document.form_ajout.entite.focus();
	return false;
	}
	return true;
}
 
 
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;
	alert("bug");
	alert(leselect);
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('idDiv').innerHTML = leselect;
	}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajax_agent.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 crc
	var sel = document.getElementById('idcrc');
	idcrc = sel.options[sel.selectedIndex].value;
	xhr.send("crc="+idcrc);
}
 
 
</script>

la partie html/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
21
22
23
24
25
26
27
28
29
 
<form action="index.php?_id_page=administration/ajout_agent.php" method="post" id="rechercheFormAdv" onSubmit="return Valider();" name="form_ajout">
<p><h3>CRC : 
<select name="crc" id="idcrc" class="inputRecherche12pxSelect largeurSelectRecherche" onChange="go();" >
<option value='-1'>Aucun</option>
<?php
	//On va chercher dans la base tous les agents:
								$requete_crc = "SELECT num_crc,nom_crc from crc order by nom_crc";
								connect_BD();
								$result_crc = mysql_query($requete_crc);
 
								//on va chercher le nni du responsable
								while ($tab_resp = mysql_fetch_array($result_crc)) 
									{
									if($tab_resp['nom_crc']!="")
										{
										echo "<option value=\"".$tab_resp['num_crc']."\"";
										echo ">".trim(formater_nom($tab_resp["nom_crc"]))."</option>";
										}
									}
?>
</select></h3>
</p><p><div id="idDiv">
<?php echo $_POST['crc']; ?>
<h3>Equipe : 
<select name="equipe" id="idequipe" class="inputRecherche12pxSelect largeurSelectRecherche">
<option value='-1'>Choisir un crc</option>
</select>
</h3></div></p>

et voici au besoin le fichier ajax_agent.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
21
22
 
<div id="idDiv"><h3>Equipe : 
<select name="equipe" id="equipe" class="inputRecherche12pxSelect largeurSelectRecherche">
								<?php
								//On va chercher dans la base tous les sites existant:
								$requete_site = "SELECT DISTINCT code_equipe,nom_equipe from equipes where crc = '".$_POST['crc']."' order by nom_equipe";
								$result_site = mysql_query($requete_site);
 
								//Pour chaque site trouvé dans la base, on affiche la possibilité de le choisir et si c'est le critére de recherche on l'affiche
								while ($tab_site = mysql_fetch_array($result_site)) 
									{
									if($tab_site['site']!="")
										{
										echo "<option";
										if($result['site']==$tab_site['site'])echo " selected=\"selected\"";
										echo ">".$tab_site['site']."</option>";
										}
									}
 
?>
</select>
</h3></div>

Merci

**andry.aime** · 30/03/2010, 14h25

Installes firebug et décrit nous les erreurs retourner

Par contre dans le fichier appelé, vires la partie

<div id="idDiv"><h3>Equipe :

et ses balises fermantes.

**ballantine's** · 30/03/2010, 14h26

je n'ai pas firefox sur mon poste pour le moment

**andry.aime** · 30/03/2010, 14h35

Pourquoi tu mets ton select dans uen balise h3?
Essaie de faire

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if(xhr.readyState == 4 && xhr.status == 200){
	leselect = xhr.responseText;
	alert(leselect);
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('idDiv').innerHTML = leselect;
	}
	else
	{
	  alert(xhr.readySate);
	  alert(xhr.status);
	}

**ballantine's** · 30/03/2010, 14h39

ah j'ai le message undefined qui s'affiche

**ballantine's** · 30/03/2010, 16h33

J'ai modifié le chemin de mon fichier "ajax_agent.php" et je n'ai plus d'erreur undefined mais malgré tout il ne se passe rien. J'ai mis des alert un peu partout pour voir ce qu'il se passait :

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
 
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;
	alert(leselect);
	alert("ok");
	// On se sert de innerHTML pour rajouter les options a la liste
	document.getElementById('idDiv').innerHTML = leselect;
	}
	else
	{
	alert("else");
	  alert(xhr.readySate);
	  alert(xhr.status);
	}
	}
alert("bug");
	// Ici on va voir comment faire du post
	xhr.open("POST","C:\wamp\www\restitutions\contenu\administration\ajax_agent.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 crc
	sel = document.getElementById('idcrc');
	idcrc = sel.options[sel.selectedIndex].value;
	xhr.send("crc="+idcrc);
}

et ne s'affiche à l'écran que "bug" il ne passe pas par la condition

Code :

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

if(xhr.readyState == 4 && xhr.status == 200

ni dans le else de cette condition et je ne comprend pas pourquoi

Code :

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

1
2
 
 alert(xhr.readySate);

affiche 0

et

Code :

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

1
2
 
alert(xhr.status);

n'affiche rien

[AJAX] interaction entre listes déroulantes qui ne fonctionne pas

AJAX

Discussions similaires

Partager

Partager