[AJAX] Plusieurs champs màj en fonction d'un seul...

**Davboc** · 14/02/2006, 17h00

Bonjour,
En m'inspirant du tuto de siddh, je souhaite mettre à jour plusieurs champs de formulaire en fonction du choix fait dans une dropdown. Voilà 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
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
 
function go(){
				UpdateName();
				UpdateCustomer();
			}
			/**
			* This method will change the project name in the textbox according to the selected project.
			*/
			function UpdateName(){
				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){
						NewHTMLCode = xhr.responseText;
						alert(xhr.responseText);
				// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('Name').innerHTML = NewHTMLCode ;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ModifyProject-FieldUpdate.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 projet
				sel = document.getElementById('Project');
				projectid = sel.options[sel.selectedIndex].value;
				xhr.send('ProjectID='+projectid+'&FieldNumber=1');
			}
			/**
			* This method will change the default customer in the Customer selection dropdown according to the selected project.
			*/
			function UpdateCustomer(){
				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){
						NewHTMLCode = xhr.responseText;
												// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('Customer').innerHTML = NewHTMLCode ;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ModifyProject-FieldUpdate.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 projet
				sel = document.getElementById('Project');
				projectid = sel.options[sel.selectedIndex].value;
				xhr.send('ProjectID='+projectid+'&FieldNumber=2');
			}

Le problème est le suivant :

La seconde fonction appelée par go() s'execute correctement (grâce à votre aide d'ailleurs, merci encore

) mais la première ne s'execute pas : en insérant des alert je me suis rendu compte que le programme ne rentrait pas dans le

Code :

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

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

...

Avez vous une idée de solution ? Peut-être suis en train de faire fausse route, le fonction go appelée au changement de choix d'une liste deroulante va elle meme appeler une douzaine de fonctions qui mettront chacune à jour une partie de formulaire... Peut être y'a t'il une meilleure façon de proceder ?

Merci !

**Davboc** · 15/02/2006, 09h56

alors en testant et retestant je me suis rendu compte que quelques fois ca rentrait dans le if mais que ça me mettait le code correspondant au second case du switch...

Fichier ModifyProject-FieldUpdate.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
<?php
	global $dbcnx;
	switch ($_POST["FieldNumber"]) {
case 1:
	echo "<select size=\"1\" name='Customer'>"; 
	if(isset($_POST["ProjectID"])){
		$res = mysql_query("SELECT Name FROM project 
			WHERE ProjectID=".$_POST["ProjectID"]."",$dbcnx);
		while($row = mysql_fetch_assoc($res)){
			echo "<input type=\"text\" name=\"ProjectName\" size=\"12\" value='".$row["Name"]."'>";
		}
	}
	break;
case 2:
   echo "<select size=\"1\" name='Customer'>"; 
	if(isset($_POST["ProjectID"])){
		$res = mysql_query("SELECT c.CustomerID as id,c.Name as name FROM customer c, project p 
			WHERE p.ProjectID=".$_POST["ProjectID"]." AND p.CustomerID=c.CustomerID ORDER BY c.Name",$dbcnx);
		while($row = mysql_fetch_assoc($res)){
			echo "<option selected value='".$row["id"]."'>".$row["name"]."</option>";
		}
		$res = mysql_query("SELECT c.CustomerID as id,c.Name as name FROM customer c, project p 
			WHERE p.ProjectID=".$_POST["ProjectID"]." AND p.CustomerID!=c.CustomerID ORDER BY c.Name",$dbcnx);
	    while ($val = mysql_fetch_array($res)){
	    echo "<option value='".$val["id"]."'>".$val["name"]."</option>";
	     }
	}
 
	echo "</select>";
   break;
case 3:
   echo "probleme";
   break;
case 4:
   echo "probleme";
   break;
case 5:
   echo "probleme";
   break;
case 6:
   echo "probleme";
   break;
case 7:
   echo "probleme";
   break;
case 8:
   echo "probleme";
   break;
case 9:
   echo "probleme";
   break;
case 10:
   echo "probleme";
   break;
case 11:
   echo "probleme";
   break;
}
?>

**titoumimi** · 15/02/2006, 10h08

je pense que c'est un problème d'instances : il va faloir que tu crées deux instances différentes de ton objet xhh ...

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
 
var xhr = null;  <---- à dégager et à remettre dans la fonction
 
			function getXhr(){
				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;
			}

puis, dans tes fonctions :

Code :

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

1
2
3
4
 
xhr_1 = getXhr();
// et donc modifier tout tes appels à chr : 
xhr.abort(); devient xhr_1.abort();

**denisC** · 15/02/2006, 10h17

Envoyé par Davboc

Avez vous une idée de solution ? Peut-être suis en train de faire fausse route, le fonction go appelée au changement de choix d'une liste deroulante va elle meme appeler une douzaine de fonctions qui mettront chacune à jour une partie de formulaire... Peut être y'a t'il une meilleure façon de proceder ?

Merci !

XHR est asynchrone, qu'est ce que ça veux dire?

L'objet xmlHttpRequest est la pluspart de temps utilisé en mode asynchrone (qui fait tout sont interet).
En mode asynchrone, on donne l'adresse à laquelle l'objet XHR doit aller requeter (via la méthode open) puis sa réaction à faire quand la requete reviendra (via la proporiété onreadystatechange). Une fois XHR programmé de cette façon, on l'envoi par la méthode null.
A partir de là, telle une fusée dans l'espace, XHR part au loin et est en mode automatique. JavaScript nous rends la main (à l'utilisateur et/ou au script javascript) en sachant que XHR est correctement programmé.
Si maintenant on réutilise ce même objet XHR dans un script suivant directement le précédent, il y a fort à parier que celui-ci n'aura pas terminé sa requete.

Et en lui passant des nouveau paramètres avec open, onreadystatechange et send, on lui annule complétement sa mission précédente et on lui en redonne une autre.

Alors, comment effectuer plusieurs missions?

Tout comme pour les fusées, les possiblités sont multiples:

Se faire suivre les deux missions. Pour ça, il suffit d'indiquer à XHR qu'à son retour (onreadystatechange), il pourra directement repartir pour une autre mission.
Effectuer les deux missions en parrallèle. Pou cela, nous allons devoir créer deux instances de xmlHttpRequest différentes (deux fusées), qui travailleront indépendamment.
Réunir les deux missions. Généralement, si les deux missions se suivent, il serait bien plus simple de n'effecuter qu'une seule requete vers le serveur, cette requete ramenant l'information nécessaire pour les deux actions.
Dernière possiblité, certainement la plus mauvaise: utiliser XHR en mode synchrone. Dans ce cas, le navigateur sera bloqué tant que la requete ne sera pas revenue.

PS : Si je t'ai répondu de cette façon, c'est pour mettre en place une question/réponse à mettre dans la FAQ, vu le nombre de personnes qui nous posent cette question. Est-ce que l'explication te parait claire?

**Davboc** · 15/02/2006, 10h36

Oui merci, je crois avoir compris, mais n'est-ce pas ta solution 1 que j'ai utilisé ? Il y a à chaque fois un onreadystatechange dans mes fonctions...

Quant à la solution 2, càd créer une instance de XHR pour chaque requete, donc pour chaque champ de mon formulaire ça m'amènerait creer une douzaine d'instances... Ca poserait pas de problème ?

**titoumimi** · 15/02/2006, 10h39

l'idée du 1, c'est ca :

Code :

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

1
2
3
4
5
 
if(xhr.readyState == 4 && xhr.status == 200){
                  NewHTMLCode = xhr.responseText;
				  UpdateCustomer(); 
				  }

tu ne balance ta deuxième requête que lorsque la première est terminée

**Davboc** · 15/02/2006, 10h49

Merci ! Je vais essayer ça ça me semble plus propre que la seconde...

Y'a pas : Developpez.com ça ROXX !! 8)
Merci infiniment sans vous j'y arriverait pas je me serais découragé depuis longtemps !!

**Davboc** · 15/02/2006, 11h14

Bon alors j'ai mis l'appel à la fonction updatecustomer dans la fonction updatename comme suivant :

J'ai donc viré la fonction go() qui est maintenant obsolète et mis dans le onchange du 1er select un appel à UpdateName...

Ca devrait marcher d'après ce que vous me dites non ?
Et pourtant... Maintenant je me retrouve avec un select vide placé devant mon champ de texte, qui maintenant est mis à jour, mais le second select ne l'est plus... j'ai m**dé ??

**denisC** · 15/02/2006, 11h22

Envoyé par Davboc

case 1:
echo "<select size=\"1\" name='Customer'>";

Pourquoi tu fais un echo d'un select dans le cas 1 ?!?!

Ou alors, j'ai pas compris...

Tu peux essayer de réexpliquer plus lentement ce qui se mets correctement en place (Name, Customer, les deux)? Et ce qui ne marche pas?

**Davboc** · 15/02/2006, 11h26

Les erreurs les plus grosses sont les moins visibles....... Merci ça marche farpaitement maintenant !! Désolé pour le boulettisme....

Donc je reexplique pour info :

Chaque projet a un nom et un client (et plein d'autres choses mais c pas important). Le but de ce formulaire est de Modifier les données d'un projet. On selectionne donc un projet dans une dropdown box complétée selon ce qu'il y a dans la BDD, puis ensuite le champ texte et la dropdown customer prennent une valeur par défaut selon le projet selectionné plus haut... Pour ensuite pouvoir eventuellement être modifiés...

Suis-je clair ?