[AJAX] Récupération de la value d'une option d'une liste mise à jour par AJAX

Version imprimable

Bonsoir,

Dans un formulaire, j'ai une liste founisseurs. Lorsque je sélectionne un fournisseur dans la liste, je voudrais mettre à jour la liste des familles à jour et, lorsque celle-ci a été mise à jour par de l'AJAX, je voudrais pouvoir sélectionner une une famille et, par ce fait, mettre à jour, toujours via de l'AJAX, une liste de produits.

Le problème, c'est que ma liste des familles se met bien à jour en fonction du fournisseur sélectionné, mais lorsque je veux mettre à jour la liste des produits, la value de l'option correspondant à la famille n'est pas récupérée, et donc ma mise à jour des produits ne s'effectue pas.

Je travaille avec FireFox.

Voici mon code :

- Mon formulaire ajaxCommandes.php :

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
<div id="contenu">
   <form name="commande" method="post" action="enregCommande.php">
   <?php afficherErreur($erreur); ?>
	<table id="tcontenu">
 	<tr>
 		<td id="tdcontenu" colspan="7">Date*
 
		 <select name='jour' id='jour' tabindex='1' onChange="if(document.forms.commande.dejaControle.value == 1) CheckDate(document.forms.commande.jour, document.forms.commande.mois, document.forms.commande.annee, '2007', '3007', document.forms.commande.dejaControle)">
		     <option value='0' selected></option>
		     <option value='01'>01</option>
		     <option value='02'>02</option>
		     <option value='03'>03</option>
		     <option value='04'>04</option>
		     <option value='05'>05</option>
		     <option value='06'>06</option>
		     <option value='07'>07</option>
		     <option value='08'>08</option>
		     <option value='09'>09</option>
		     <option value='10'>10</option>
		     <option value='11'>11</option>
		     <option value='12'>12</option>
		     <option value='13'>13</option>
		     <option value='14'>14</option>
		     <option value='15'>15</option>
		     <option value='16'>16</option>
		     <option value='17'>17</option>
		     <option value='18'>18</option>
		     <option value='19'>19</option>
		     <option value='20'>20</option>
		     <option value='21'>21</option>
		     <option value='22'>22</option>
		     <option value='23'>23</option>
		     <option value='24'>24</option>
		     <option value='25'>25</option>
		     <option value='26'>26</option>
		     <option value='27'>27</option>
		     <option value='28'>28</option>
		     <option value='29'>29</option>
		     <option value='30'>30</option>
		     <option value='31'>31</option>
		    </select>
		 /
			<select name='mois' id='mois' tabindex='2' onChange="if(document.forms.commande.dejaControle.value == 1) CheckDate(document.forms.commande.jour, document.forms.commande.mois, document.forms.commande.annee, '2007', '3007', document.forms.commande.dejaControle)">
		      <option value='0' selected></option>
			  <option value='01'>01</option>
		      <option value='02'>02</option>
		      <option value='03'>03</option>
		      <option value='04'>04</option>
		      <option value='05'>05</option>
		      <option value='06'>06</option>
		      <option value='07'>07</option>
		      <option value='08'>08</option>
		      <option value='09'>09</option>
		      <option value='10'>10</option>
		      <option value='11'>11</option>
		      <option value='12'>12</option>
		    </select>
		 /
			<select name='annee' id='annee' tabindex='3' onChange="CheckDate(document.forms.commande.jour, document.forms.commande.mois, document.forms.commande.annee, '2007', '3007', document.forms.commande.dejaControle)">
		      <option value='0' selected></option>
              <?php
                if(date('m') == 1)
                                 echo "<option value='" . date("Y", mktime(date('H'), date('i'), date('s'), date('m'), date('w'), date('Y') - 1)) . "'>" . date("Y", mktime(date('H'), date('i'), date('s'), date('m'), date('w'), date('Y') - 1)) . "</option>";                  
                                echo "<option value='" . date("Y") . "'>" . date('Y') . "</option>";                    
                          ?> 			  
			</select>
			<input type='hidden' name='dejaControle' id='dejaControle' value='0'>
		</td>
 	</tr>
	<tr>
 		<td id="tdcontenu">&nbsp;</td>
 		<td id="tdcontenu">Fournisseur</td>
 		<td id="tdcontenu">
		    <select name='fournisseurs' id='fournisseurs' style='width:150px' tabindex='4' onChange="majFam();">
		       <option value='0' selected></option>
		       <?php affFourn(); ?>
		    </select>		   
	    </td>
 		<td id="tdcontenu">&nbsp;</td>
 		<td id="tdcontenu">Famille</td>
 		<td id="tdcontenu">
		  <div id="famille" style='display:inline'>
			<SELECT name='famille' tabindex='5' onChange="majProd();">
		      <option value='0' selected>Choisir un fournisseur</option>
		    </select>
		  </div>
	    </td>
 		<td id="tdcontenu">&nbsp;</td>
 	</tr>
	<tr>
 		<td id="tdcontenu">&nbsp;</td>
 		<td id="tdcontenu">Produit*</td>
 		<td id="tdcontenu">
		 <div id="produit" style='display:inline'>
		 </div>
		</td>
 		<td id="tdcontenu">&nbsp;</td>
 		<td id="tdcontenu">Prix unitaire*</td>
 		<td id="tdcontenu"><input type="text" name="requiredprix" id='7' size="5" maxlength="5" tabindex='7' onblur="this.style.backgroundColor = '#FFFFFF'; if(verifNombre(this)) this.style.backgroundColor = '#F3C200'">&nbsp;&nbsp;euros</td>
 		<td id="tdcontenu">&nbsp;</td>
 	</tr>
 </table>
   </form>
  </div>

- Mes fonctions du fichier fonctionsJs.js :

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
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;
	}
 
function majFam()
{
 {
  xhr=getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // On affiche dans le div le retour 
      document.getElementById('famille').innerHTML = xhr.responseText;
     }
   }
  // On envoie la requete 
  xhr.open("POST",'../transferts/ajaxMajFam.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // On recupere la valeur du paramètre
  fournisseur = document.getElementById('fournisseurs').value;
  // On envoie la récupération
  xhr.send("fournisseur="+fournisseur);
 }
 
}
 
function majProd()
{
 {
  xhr=getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      // On affiche dans le div
      document.getElementById('produit').innerHTML = xhr.responseText;
     }
   }
  // On envoie la requete 
  xhr.open("POST",'../transferts/ajaxMajProd.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // On recupere la valeur des paramètres
  fournisseur = document.getElementById('fournisseurs').value;
  famille = document.getElementById('famille').value;
  // On envoie la récupération
  xhr.send("fournisseur="+fournisseur+"&famille="+famille);
 }
 
}

- Mon fichier de traitement ajaxMajFam.php :

Code:

1
2
3
4
<?php
 include_once("../fichiersAnnexes/fonctionsPhp.inc");
 affFamilles($_POST['fournisseur']);
?>

- Mon fichier de traitement ajaxMajProd.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
 include_once("../fichiersAnnexes/fonctionsPhp.inc");
 
 if($_POST['fournisseur'] == "" || $_POST['fournisseur'] == 0)
   $fournisseur = "";
 else
   $fournisseur = $_POST['fournisseur'];
 
 if($_POST['famille'] == "" || $_POST['famille'] == 0)
   $famille = "";
 else
   $famille = $_POST['famille'];
 
 affProd($fournisseur, $famille);
 
 ?>

- Et, pour finir, mes fonctions du fichier fonctionsPhp.inc :

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
function affFamilles($fourn)
 {
  $connect = connection("../interfaces/gestProd.php");
 
  echo "<SELECT name='famille' tabindex='5' onChange='majProd();'>";
 
   $requete = "SELECT distinct cle_famille, nom_famille FROM familles_tb, fournisseurs_tb, produits_tb WHERE (cde_fournisseur1_prod = $fourn or cde_fournisseur2_prod = $fourn or cde_fournisseur3_prod = $fourn) and cde_famille_prod = cle_famille order by nom_famille";
   $result = mysql_query($requete, $connect);
   $num_result = mysql_num_rows($result);
 
   for($i = 0; $i < $num_result; $i++)
    {
     $row = mysql_fetch_array($result);
     echo "<OPTION VALUE='" . $row[0] . "'>" . htmlentities($row[1]) .  "</OPTION>";
    }
 echo "</select>";
 
  mysql_free_result($result);
  mysql_close($connect);
 }
 
function affProd($fourn, $fam)
 {
    $connect = connection("../interfaces/gestProd.php");
 
    echo "<SELECT name='produit' tabindex='6'>";
 
    if($fourn == "" && $fam == "")
      $requete = "select cle_prod, denom_prod from produits_tb where supprime_prod = 0 order by denom_prod";
    elseif($fam == "")
      $requete = "select cle_prod, denom_prod from produits_tb where cde_fournisseur1_prod = '$fourn' and supprime_prod = 0 order by denom_prod";
    else
      $requete = "select cle_prod, denom_prod from produits_tb where cde_fournisseur1_prod = '$fourn' and cde_famille_prod = '$fam' and supprime_prod = 0 order by denom_prod";
 
   $result = mysql_query($requete, $connect);
   $num_result = mysql_num_rows($result);
 
   for($i = 0; $i < $num_result; $i++)
    {
     $row = mysql_fetch_array($result);
     echo "<OPTION VALUE='" . $row[0] . "'>" . $row[1] . "</OPTION>";
    }
 
  echo "</select>";
 
  mysql_free_result($result);
  mysql_close($connect);
 
 }

Quelqu'un pourrait m'expliquer pourquoi ma liste famille se met bien à jour mais que je ne récupère pas l'id de ma famille lorsque je la sélectionne dans la liste pour mettre à jour la liste des produits? Comment faire pour le récupérer?

Merci d'avance pour vos réponses.

Christophe

Salut dubitoph,

Cette ligne de code :

Code:

famille = document.getElementById('famille').value;

récupère le div d'id 'famille' au lieu de ton select, essaie d'appeler ton div par un autre id par exemple <div id='divfamille'>
D'autre part, ici

Code:

echo "<SELECT name='famille' tabindex='5' onChange='majProd();'>"; /* fichier fonctionsPhp.php */

ton select n'a pas l'id famille( idem dans le fichier ajaxCommandes.php d'ailleurs).
Evite les majuscules aussi dans le html (ton SELECT, tes OPTION VALUE).

Essaye avec ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // dans ajaxCommandes.php // ton div d'affichage : <div id="divfamille" style='display:inline'> <select name='famille' id='famille' tabindex='5' onChange="majProd();"> <option value='0' selected>Choisir un fournisseur</option> </select> </div> // ta commande d'affichage avec le retour d'ajax document.getElementById('divfamille').innerHTML = xhr.responseText; // dans fonctionsPhp.php echo "<select name='famille' id='famille' tabindex='5' onChange='majProd();'>";
Tiens-nous au courant !

Bonjour et merci beaucoup pour ta réponse : ça fonctionne de fait parfaitement.

Maintenant, pour aller plus loin, le fonctionnement final doit être le suivant : lorsque je load le formulaire pour la première fois, la liste des différents fournisseurs encodés doit apparaître (ce qui était déjà le cas) ainsi que la liste complète des produits. Lorsque je sélectionne un fournisseur, 2 listes doivent se mettre à jour : la liste des familles et la listes des produits ne reprenant plus que les produits du fournisseur sélectionné. Enfin, si je désire filtrer encore plus finement, je sélectionne une famille et la liste des produits se met alors à jour.

Voici donc mon code modifié dans le formulaire "ajaxCommandes.php" :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ... <select name='fournisseurs' id='fournisseurs' style='width:150px' tabindex='4' onChange="majFam(); majProd()"> <option value='0' selected>Choisissez un fournisseur</option> <?php affFourn(); ?> </select> ... <div id="divfamille" style='display:inline'> <select name='famille' id='famille' tabindex='5' onChange="majProd();"> <option value='0' selected>Choisir un fournisseur</option> </select> </div> ... <div id="divproduit" style='display:inline'> <?php affProd("", ""); ?> </div>
En faisant de la sorte, il n'y a que la liste des produits qui se met à jour lorsque je sélectionne un fournisseur et non plus la liste des familles.

Si j'essaie de faire

Code:

onChange="majFam();" onBlur="majProd();"

au niveau de la balise select du fournisseur, alors c'est ma liste des produits qui ne se met pas à jour.

Est-ce qu'éventuellement tu aurais une idée?

Merci d'avance.

Christophe

05/07/2007, 19h00
dream_of_australia
Je pense que sur ton onchange(), tu devrais appeler une nouvelle fonction qui sera chargée elle de mettre à jour les deux listes. Comme les deux mises à jour se font dans des div d'id différents, il ne devrait pas y avoir de souci.
Code:

1 2 3 4 5 6 7 function maj() { majFam() ; majProd() ; } // ton appel onchange onChange="maj();"
J'espère que ça t'aidera.
06/07/2007, 11h21
dubitoph
Merci beaucoup pour ton aide...

J'avais déjà essayé cette solution et je viens à nouveau de réessayer. Lorsque j'utilise cette méthode, j'ai une erreur que je ne comprends absolument pas : dans fireBug, est indiqué "maj is not defined". Hors, dans mon fichier "fonctionsJs.js", j'ai bien ma fonction.

Voici mon code :

- dans ajaxCommandes.php :
Code:

1 2 3 4 5 <select name='fournisseurs' id='fournisseurs' style='width:150px' tabindex='4' onChange="maj();"> <option value='0' selected>Choisissez un fournisseur</option> <?php affFourn(); ?> </select>
- dans "fonctionsJs.js" :
Code:

1 2 3 4 5 6 function maj() { majFam(); majProd(); }
Quelqu'un aurait un idée de la provenance du poblème?

Merci d'avance pour vos réponses.

Christophe
06/07/2007, 13h46
dream_of_australia

Et tes autres appels de la page fonctionnent ?

Si c'est le cas, vérifie que dans ton fichier js la fonction maj soit bien en dehors des autres fonctions (une accolade mal refermée peut-être).
Et essaie de changer le nom de la fonction, en miseAJour() par exemple (j'ai eu le cas une fois j'ai appelé une fonction selection() alors que c'est un mot-clé réservé...:oops: ).
Dans FireBug, regarde, tu as la liste des fonctions définies (onglet DOM, les fonctions sont listées en vert dans la colonne de gauche), regarde si elle fait partie de cette liste...
Souvent ça sert de mettre des alert un peu partout pour voir où on en est, mais là je ne vois pas où tu pourrais en mettre.
D'autre part, je viens de vérifier dans mes codes, sur un appel onchange='mafonction()' je ne mets pas de point virgule après les parenthèses. Je ne sais pas quelle est la norme mais en tout cas ça marche comme ça chez moi. Essaie d'enlever le point virgule: onchange="maj()" . Désolée si je t'ai mis ça dans le code que je t'ai donné...

Des fois ce sont des erreurs très bêtes qui empêchent les choses de marcher.
06/07/2007, 13h59
dubitoph
Petite précision....

J'ai déplacé ma fonction en début de fichier. La fonction est maintenant bien appelée mais ne met à jour que ma liste produits et pas celle des familles. Il n'a donc pas de différence entre la méthode qui consiste en

Code:

onChange="majFam(); majFourn();"

et

Code:

onchange="maj();"

avec
Code:

1 2 3 4 5 6 maj() { majFam(); majProd(); }
Mon problème reste donc entier.
06/07/2007, 16h55
dream_of_australia

Peut-être pourrais-tu mettre tes pages en fichier attaché ? Comme ça on pourrait voir tes fonctions de mise à jour.
07/07/2007, 13h50
dubitoph

5 pièce(s) jointe(s)

Bonjour,

Tout d'abord, je te remercie de l'intérêt que tu portes à mon post...

Ci-attachés, tu trouveras les fichiers demandés. J'ai dû modifier l'extension de mon fichier 'fonctionsPhp.inc" en "fonctionsPhp.php" pour une compatibilité de prise en charge des extentions de fichier de ce forum.

Christophe

Il n'y a pas de quoi !

Tout d'abord, quelques petites choses :

Mets plutôt des selected="selected" au lieu de selected dans tes <select>
Mets plutôt <option ...></option> en minuscules au lieu de <OPTION>

Je peux maintenant te dire où mettre des alert afin de t'aider à trouver où ça coince.
Dans la fonction majProd() :
tout au début :
Code:

1 2 3 function majProd() { alert("on est entré dans majProd ! ") ;
comme ça tu sauras si au moins la fonction est appelée ou non.
et plus bas :
Code:

1 2 3 4 fournisseur = document.getElementById('fournisseurs').value; famille = document.getElementById('famille').value; alert ("fournisseur : " + fournisseur + ", famille : " + famille) ; xhr.send("fournisseur="+fournisseur+"&famille="+famille);
comme ça tu sauras s'il a bien récupéré les bonnes valeurs par rapport au choix que tu as fait dans la liste.

08/07/2007, 09h57
dream_of_australia
Je crois avoir trouvé d'où vient le problème.

Dans tes lignes de type :
fournisseur = document.getElementById('fournisseurs').value;
et
famille = document.getElementById('famille').value;
que tu utilises dans tes fonctions js d'appel ajax, essaie de remplacer ces lignes par ça :
Code:

1 2 fourn = document.getElementById('fournisseurs') ; fournisseur = fourn.options[fourn.selectedIndex].value;
et
Code:

1 2 fam = document.getElementById('famille') ; famille = fam.options[fam.selectedIndex].value ;
Remplace-les partout ! Normalement ça devrait fonctionner.
08/07/2007, 21h00
dubitoph
Bonsoir,

Encore un tout grand merci pour ton aide.

Après avoir modifié le code comme tu me l'avais indiqué, il n'y avait pas de changement. J'ai alors mis des alert comme tu me l'avais précédemment suggéré, et j'ai vu que l'appel à mes deux fonctions se faisait bien et qu'à ce moment, mes mises à jour se faisaient correctement. Dès lors, je me suis dit que l'alert ralentissait la suite du traitement et qu'il fallait donc que je cherche dans ce sens. J'ai donc trouvé cette solution :
Code:

1 2 3 4 5 6 function maj() { majFam(); opener.location.reload(true); majProd(); }
Maintenant, ça fonctionne nikel.

Peut-être à une prochaine pour de nouvelles aventures...

Christophe
08/07/2007, 23h01
dubitoph

Re-bonsoir,

Je me suis emballé trop vite : même de la manière décrite ci-dessus, ça ne fonctionne toujours pas correctement. La mise à jour des familles se fait bien sur le "onchange" des fournisseurs, mais pas la mise à jour des produits.

Galère....

Toutes vos idées sont les bienvenues.

Merci d'avance.

Christophe
09/07/2007, 07h40
dream_of_australia

3 pièce(s) jointe(s)

J'ai fait une version simplifiée (sans base de données) et tout fonctionne chez moi, les deux listes se mettent à jour. Petite chose : j'ai mis maj() après les fonctions majProd() et majFam(), le souci venait peut-être de là.
09/07/2007, 10h22
dubitoph

Bonjour,

Je pense que, cette fois-ci, j'y suis : j'ai nommé mon objet xhr de manière différente dans chaque fonction, et ça à l'air de fonctionner.

Dans ma fonction majFam, j'ai effectué

Code:

lexhr=getXhr();

et je n'ai rien changé das ma fonction majProd.

Je faire différents tests avant de définitivement crier victoire....

Christophe
09/07/2007, 17h00
dubitoph

Bonjour,

Tout est maintenant parfait. Un tout grand merci pour ton aide, dream_of-australia.

Christophe
09/07/2007, 17h45
dream_of_australia

Pas de quoi;)