[AJAX] Plusieurs champs màj en fonction d'un seul...
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:
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 :wink: ) 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:
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 !
Re: [AJAX] Plusieurs champs mis à jour en fonction d'un seul
Citation:
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?
:merci:
