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

**dubitoph** · 04/07/2007, 21h31

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 :

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

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

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

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

- Mon fichier de traitement ajaxMajProd.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
<?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 :

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

**dream_of_australia** · 05/07/2007, 07h57

Salut dubitoph,

Cette ligne de code :

Code :

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

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 :

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

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 :

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

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 !

**dubitoph** · 05/07/2007, 12h21

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 :

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

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

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

**dream_of_australia** · 05/07/2007, 19h00

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 :

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

1
2
3
4
5
6
7
function maj() {
  majFam() ;
  majProd() ;
}
 
// ton appel onchange
onChange="maj();"

J'espère que ça t'aidera.

**dubitoph** · 06/07/2007, 11h21

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 :

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

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 :

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

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

**dream_of_australia** · 06/07/2007, 13h46

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

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

**dubitoph** · 06/07/2007, 13h59

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 :

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

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

et

Code :

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

onchange="maj();"

avec

Code :

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

1
2
3
4
5
6
 
maj()
{
majFam();
majProd();
}

Mon problème reste donc entier.

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager