Discussion :

[baggie]

Bonjour,

j'ai trois listes déroulantes : entreprises, lieux (sites), projets.
Chacune d'elle est alimentée par requête SQL.
Quand on choisit une entreprise dans la première, les lieux correspondants se chargent dans la seconde et les projets correspondants à cette entreprise se charge dans la troisième. Lieux et projets n'ont donc aucun lien mais se chargent toutes les deux depuis la première liste.

Mon code :

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
<select id="entreprises" name="entreprises" onchange="this.form.submit();go2();">
<?php			
	$req = mysql_query("SELECT ...;");
	while ($donnees = mysql_fetch_array($req))
	{
		$selected = (isset($_POST['...']) && $_POST['...'] == $donnees['id_societe'])? " selected":""; 
		echo '<option value="'.$donnees['id_societe'].'"'. $selected.'>'.$donnees['...'].'</option>';
	}
?>            
</select></td>
			
<td><div id="liste_projets" style="display:inline">
      <select name="liste_projets">
      </select>
      </div></td>

<!-- Liste des lieux (aussi des sociétés) -->
<select name="site_projet">
	<?php			
        $req = mysql_query("SELECT ...;");
	while ($donnees = mysql_fetch_array($req))
	{
		$selected = (isset($_POST['...']) && $_POST['...'] == $donnees['id_societe'])? " selected":""; 
		echo '<option value="'.$donnees['id_societe'].'"'. $selected.'>'.$donnees['...'].'</option>';
	}
?>            
</select></td></tr>

La seconde liste alimentée par une requête extérieure en Ajax :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
echo '<select name="liste_projets">';
if(isset($_POST['id_societe']))
{
	$res = mysql_query("...;");
	while($donnees = mysql_fetch_assoc($res))
	{
		echo '<option value="'.$donnees['nom_projet'].'">'.$donnees['nom_projet'].'</option>';
	}
}
echo '</select>';
?>

Et enfin mon code de la fonction go2(); qui permet de recharger ma dernière liste vue :

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
 
function go2()
{
	var xhr = getXhr();
	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 à la liste
			document.getElementById('liste_projets').innerHTML = leselect;
		}
	}
 
	// récupération de la requête SQL pour afficher les projets liés à la société
	xhr.open("POST","req_liste_proj.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// on poste l'id de la société comme argument
	sel = document.getElementById('client_projet');
	idsociete = sel.options[sel.selectedIndex].value;
	xhr.send("id_societe="+idsociete);
}

Mon problème (j'y arrive enfin) :
- lorsque je sélectionne une entreprise dans la première liste, mes deux autres listes se chargent avec les bonnes valeurs MAIS la liste des projets affiche le nom des projets à peine une seconde ! Je vois le nom du premier projet de la liste durant une seconde et hop, elle se vide !

Et ça je ne sais pas d'où ça vient, jamais rencontré le problème.
Donc si vous pouviez m'aider ...

[E.Bzz]

Bonjour,

Et ça je ne sais pas d'où ça vient

Ben dans le onchange de la 1°, tu fais un submit() juste avant ton appel Ajax ...
Tu as déjà de la chance de la voir se remplir (même brièvement) : c'est que ta réponse Ajax arrive avant que le submit soit effectif : coup de bol

Bref : vire le submit !
Soit tu utilises Ajax, soit tu envoies ton formulaire, mais les 2 ne sont pas compatibles simultanément ...

D'ailleurs avec un submit il ne s'agit plus de "listes liées".

A+

[baggie]

Je vois ce que tu veux dire. Pour ce qui est du "listes liées" j'appelle ça comme ça pour "entreprises" et "lieux" mais je sais que ce n'est pas comme les deux autres avec la liaison en Ajax quoi.

Le problème est que ma liste de sites se remplit en fonction de la première. Je dois donc soumettre la première obligatoirement pour avoir les bonnes valeurs non ? (si je ne veux pas passer par ajax)

[E.Bzz]

Le problème est que ma liste de sites se remplit en fonction de la première. Je dois donc soumettre la première obligatoirement pour avoir les bonnes valeurs non ?

Ben tu n'as qu'à faire une go1() pour alimenter les sites, comme tu as fait une go2() pour le projets, non ?
(et virer ce submit, puisque ta 1° liste est alimentée au chargement de la page)

A+

[baggie]

Ben tu n'as qu'à faire une go1() pour alimenter les sites, comme tu as fait une go2() pour le projets, non ?

Oui j'y ai pensé, mais c'était pour voir si une alternative n'était pas envisageable ...

et virer ce submit

Vi promis je le fais !

Merci E.Bzz

[baggie]

EDIT : bon j'ai trouvé mon problème ...

[baggie]

EDIT : erf désolée pour le multipost c'était pas prévu ><

Bon j'ai encore un problème

J'ai donc fait ma seconde liste avec Ajax, comme pour la première. Sauf que la liste des projets s'affiche bien, mais la liste des lieux (sites) correspondante a un petit problème.

Ma table entreprises :
- id_entreprise
- nom_entreprise
- filiale_de (est un id_entreprise, ex : 5.Renault PSA est filiale_de 3.Renault)

Mon code html :

Code :

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

1
2
3
4
5
6
7
 
<tr><td>Site</td>
      <td><div id="site_projet" style="display:inline;">
      <select id="site_projet" name="site_projet">
      </select>
      </div>
</td></tr>

Ma requête ajax go3(); :

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
 
function go3()
{
	var xhr = getXhr();
	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 à la liste
			document.getElementById('site_projet').innerHTML = leselect;
		}
	}
 
	// récupération de la requête SQL pour afficher les projets liés à la société
	xhr.open("POST","req_liste_sites.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// on poste l'id de l'entreprise comme argument
	sel = document.getElementById('client_projet');
	idsociete = sel.options[sel.selectedIndex].value;
	xhr.send("id_entreprise="+identreprise);
}

La page req_liste_sites.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
echo '<select name="site_projet">';
if(isset($_POST['id_entreprise']))
{
	$req = mysql_query("SELECT id_entreprise,nom_entreprise FROM ENTREPRISE 
				WHERE filiale_de = '".$_POST['id_entreprise']."'
				ORDER BY nom_entreprise ASC;");
	while ($donnees = mysql_fetch_array($req))
	{
		echo '<option value="'.$donnees['id_entreprise'].'>'.$donnees['nom_entreprise'].'</option>';
	}
}
echo '</select>';

Et l'appel de la fonction, sur la première liste (les entreprises) :

Code :

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

<td><select id="client_projet" name="client_projet" onchange="go2();go3();">

go2() fonctionne très bien et m'affiche comme il faut la liste des projets.
Pour go3(), je n'ai pas la liste complète des sites appartenant à la même entreprise, alors que j'ai testé ma requête sous phpmyadmin et qu'elle fonctionne parfaitement.

Est-ce que j'ai raté quelque chose ? Trompée à quelque part ?