Discussion :

[ballantine's]

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]

Bonjour,
Listes liées http://www.developpez.net/forums/d59...s-liees-entre/

A+.

[thom48]

Bonjour,

Je te conseille d'aller voir ce site.

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

Il m'a aidé

thomas

[ballantine's]

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]

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]

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]

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;