Discussion :

[Mind-x]

Bonjour et bonne année à toutes et tous,

Je suis actuellement entrain de programmer un site avec une dizaine de liste liées en AJAX.

Liste 1
Liste 2
Liste 3
...
Liste 10

Quand je fais un onchange sur Liste 2 (par ex), j'appelle plusieurs fonctions pour recharger les listes suivantes.

Le problème c'est que lorsque je fais le onchange (onchange : fonction 1, fonction 2, fonction 3,...), il appele toutes mes fonctions en même temps, ce qui fait que certaines listes ne sont pas encore réinitialisées...

Est il possible de lancer fonction 1 (attendre le rechargement du select), puis lancer la fonction 2 (attendre le rechargement du select), puis lancer la fonction 3,......

J'espère avoir été assé clair pour que vous puissiez m'aider

Merci d'avance et bonne journée

Mind-x

[SpaceFrog]

lance chacune des fonctions à la fin de la précédente

sinon il te faudra passer par des setInterval qui testeront de flags que tu changeras à la fin de chaque fonction ...

[Mind-x]

Merci beaucoup SpaceFrog,

Voici l'un des Onchange que j'utilise

Code :

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

onchange='SelectRg2();SelectRg3();SelectRg4();SelectLt();SelectBaie();SelectBandeau();SelectBaie();SelectPosition1();SelectPosition2();

Mon problème est (par ex) qu'il va lancer le SelectBaie avant de recharger le SelectLt (ce qui fait que lors de mon getElementById il va m'envoyer l'ancienne valeur de Lt)

Par rapport a tes solutions, je pense déjà lancer chaque fonction dans l'ordre.

Par contre pour le point "il te faudra passer par des setInterval qui testeront de flags que tu changeras à la fin de chaque fonction ", je ne vois pas trop ce que tu veux me dire ?!?
Dans chaque fonction, ex SelectLt(), après le xhr.send, il faut faire un setInterval ???

Merci encore pour ton aide

Bonne journée

[SpaceFrog]

Bon ben voici ce que j'ai pu touver de plus tordu pour resoudre ce problème ...
un sequencer

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
<script type='text/javascript'>
var Order=""
function one(){
 
	//action principale
	Order+="ONE "
	if(arguments.length==1){
		nextfunc(arguments[0])
		}
}
 
function two(){
	//action principale
		Order+="TWO "
	if(arguments.length==1){
		nextfunc(arguments[0])
		}
 
}
 
function three(){	
	//action principale
		Order+="THREE "
	if(arguments.length==1){
		nextfunc(arguments[0])
		}
 
}
 
 
function nextfunc(funcListe){
TabFuncs=funcListe.split(';');
prochaine=TabFuncs.shift()
if (TabFuncs.length>0){
	newListe=TabFuncs.join(';')
	window[prochaine](newListe)}
else{window[prochaine]()}
}
 
one("two;three;two;one")
 
</script>

il suffit de rajouter un bout de code en fin de chaque fonction et de lancer et de lancer la première fonction avec en argument une concaténation des fonctions à enchainer ...


On me souffle que ce n'est ni plus ni moins qu'une pile d'appel FIFO ^^

Mais je ne suis pas sur que celà règle tes soucis d'instanciations d'objets ...
tes xhr sont synchrones ?

[Mind-x]

Bonjour,

Merci beaucoup pour ta réponse ! c'est très sympa de ta part. j'essais tant bien que mal de comprendre le fonctionnement du code que tu m'as transmis ! (bon, ok, j'avoue je suis totalement novice !!! )

Je vais faire des essais pour voir si ton bout de code apporte une amélioration.

Pour ta question au niveau des xhr, a savoir si ils sont synchrone ou pas, je dirais que oui car mon xhr.send comporte tous les éléments...

Ceci dit, n'étant pas sur de moi (comme d'hab!), je me permets de te mettre le code d'une des fonctions

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
 
			function SelectBaie()
			{
				var xhr = getXhr(); // On appele la fonction getXhr
 
				// Traitement de la reponse au POST envoye plus bas
				xhr.onreadystatechange = function () // On defini ce qu'on va faire quand on aura une reponse
				{
					if(xhr.readyState == 4 && xhr.status == 200) // si on a tout recu et que le serveur est ok
					{
						leselect = xhr.responseText; // On indique que leselect est egal a la reponse xhr
						document.getElementById('Baie').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options a la liste batiment
					}
				}
 
				// Envois des donnees par post
				xhr.open("POST","AjaxCreaBaie.php",true); // On ouvre xhr, on lui indique la methode POST ainsi que le fichier de destination
 
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ca pour le post
 
				//On poste les arguments
 
 
 
				sel = document.getElementById('Srg1'); // ici, l'id du local
				idrg1 = sel.options[sel.selectedIndex].value;
 
				sel = document.getElementById('Srg2'); // ici, l'id du local
				idrg2 = sel.options[sel.selectedIndex].value;
 
				sel = document.getElementById('Slt'); // ici, l'id du local
				idlt = sel.options[sel.selectedIndex].value;
 
				//alert (idlt);
 
				sel = document.getElementById('Sautocom'); // ici, l'id du local
				idautocom = sel.options[sel.selectedIndex].value;
 
				sel = document.getElementById('Sbatiment'); // ici, l'id du local
				idbatiment = sel.options[sel.selectedIndex].value;
 
				xhr.send("idrg1="+idrg1+"&idrg2="+idrg2+"&idlt="+idlt+"&idautocom="+idautocom+"&idbatiment="+idbatiment); // On envois la variable idlocal qui aura la valeur de idlocal
			}

Pour information, comme tu as pu le remarquer, j'ai mis une alerte en commentaire. Si je vire le comment et que j'affiche mon alert, mon programme fonctionne correctement...


Je te remercie encore pour l'interet que tu portes a mon problème.

Bonne journée

@+

Mind-x

Ps : Ne fais pas attentions aux commentaires dans le code (je n'ai pas encore eu le temps de les mettre à jour...)

[SpaceFrog]

Jette un œil (voire deux ) sur cet article pour le coté synchrone ou asynchrone
http://siddh.developpez.com/articles/ajax/

[Mind-x]

Bon, ok, j'ai oublié le A devant synchrone !!!!!


Ceci dit, je l'ai lu plutot 15 fois qu'une ce tuto !!! c'est grace a lui que j'ai réussi a faire (enfin presque) mes 10 listes liées !

Bon, je te vois venir ! tu vas me dire que j'aurais du poster dans le forum ajax !, mais je ne sais pas si mon problème vient de la méthode AJAX ou du codage javascript qu'il contient :s

[DoubleU]

La façon que j'utilise, et que je te conseille d'utiliser aussi, c'est d'ajouter dans la déclaration de tes fonction un argument, par exemple onFinish, qui serait un callback appelé dans ton onreadystatechange et dont le role serait de lancer le chargement des valeurs du select suivant. De cette manière, tu pourrais chainer tes appels des le retour de chaque requete xhr, sans bidouillage.

La fonction ajax ressemblerait à ca (a toi de rajouter les paramètres qui vont bien):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ajax(url, onSuccess, onFinish)
{
 var xhr = getXhr();
 xhr.open("GET", url, true);
 xhr.onreadystatechange = function()
  {
    if(xhr.readystate == 4 && xhr.status == 200)
    {
      onSuccess(xhr);
      if(onFinish) 
       onFinish();
    }
  }
}

Et les appels à ca:

Code :

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

1
2
3
4
5
6
function success(xhr){ // remplir le select suivant avec les données de la requete}
 
function trois(){ajax("url", success)}
...
function deux(){ajax("url", success, trois)}
function un(){ajax("url", success, deux)}

La fonction trois() correspond au onchange du dernier select. Elle n'a pas de 3e argument, car aucun autre select ne dépend de lui.
La fonction deux correspond au onchange de l'avant dernier select. Le 2e argument te permet de remplir les valeurs de l'avant dernier select et le 3e va te permettre de charger les valeurs du dernier apres avoir rempli les valeurs de l'anavt dernier select.

De cette façon, ton appel sera le suivant:

Code html :

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

1
2
3
<select id="select1" onchange="un()">
<select id="select2" onchange="deux()">
<select id="select3">

[Mind-x]

Bonjour DoubleU

Merci beaucoup pour ta réponse.

Le problème est que je n'ai pas été assé clair sur mon explication car en fait,

J'ai fait un schéma pour que vous puissiez comprendre...

En fait, ce n'est pas forcément le select1 qui appele le Select2 qui appele le 3, ect, ect, ....

Sur le schéma joins, en rouge, vous avez les liaisons lorsque l'utilisateur sélectionne une valeur dans les différent select (pour la 1ere fois )
En bleu, les liaisons qui sont établies si l'utilisateur 'modifie' sa première selection !

Ta solution pourrait-elle fonctionner pour ce cas ?

Merci et bonne journée

[SpaceFrog]

Ce sont les plans d'un métier à tisser ?

[Mind-x]

Ouais c'est ca,

comme ajax je ne métrise pas vraiment, je me lance dans le tricot !!!!!

d'ailleurs, comme tu as reconnu mon plan a tisser, j'en déduis que tu dois bien t'y connaitre. A ce titre, tu pourras peut-etre me renseigner ....

je galère pour faire mon point en blé, tu as une idée ?!?


@+ !!!

[Mind-x]

Bonjour,

La méthode de DoubleU a l'air de fonctionner.
De ce que j'y ai compris, mon problème vient du fait que j'utilise ajax pour modifier mes select, mais que ceux ci sont rechargé grace a une requete SQL.
Comme Ajax s'execute coté client, et que SQL s'execute coté serveur, mes requetes Ajax de mes select 2 et 3 s'execute avant même que mon select 1 soit rechargé (donc j'ai des erreurs de traitement -> ma requete sql du select 3 reccupère l'ancienne valeur de select 2).

La solution consisterait donc de lancer la fonction de raffraichissement du select 2 que lorsque select 1 est rechargé.

En clair, il faut remplacer

Code :

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

onchange='Select1();Select2();Select3();

par

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
 
onchange='Select1();'
// Puis on accède a la fonction Select 1()
function Select1()
			{
				var xhr = getXhr(); // On appele la fonction getXhr
 
				// Envois des donnees par post
				xhr.open("POST","AjaxSelect1.php",true); // On ouvre xhr, on lui indique la methode POST ainsi que le fichier de destination				
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier ca pour le post
 
				// Traitement de la reponse au POST envoye plus bas
				xhr.onreadystatechange = function () // On defini ce qu'on va faire quand on aura une reponse
				{
					if(xhr.readyState == 4 && xhr.status == 200) // si on a tout recu et que le serveur est ok
					{
						leselect = xhr.responseText; // On indique que leselect est egal a la reponse xhr
						document.getElementById('Baie').innerHTML = leselect; // On se sert de innerHTML pour rajouter les options a la liste batiment --> Notre liste est donc maintenant a jour
						SelectBandeau(); // on envoit la fonction suivante
					}
				}

Voilà ce que j'y ai compris !

Je reviendrais vers vous pour vous dire si tout est ok comme ca !

Par contre, je ne vois pas l'interet (mais je suis sur qu'il y en a un !) du onsuccess et onfinish ?!? (si on tombe dans le "xhr.readyState == 4 && xhr.status == 200", c'est que forcément nous avons le retour de la requete php ? non ?

Merci encore pour votre aide

Bonne journée

Mind-x

[DoubleU]

Désolé de ne pas avoir pu répondre plus tôt, j'ai été pas mal pris hier.

L'intérêt du onComplete et onFinish, c'est d'avoir une fonction générique que tu peux utiliser dans tous les cas. Si tu gardes comme tu as fait, tu vas avoir beaucoup de code redondant (tout ce qui concerne l'envoie de la requete). Ce que je proposais, c'est de mettre ton code qui doit être exécuté quand la requete a réussi dans le onSuccess et le code qui doit être exécuté à la fin de la requete dans le onFinish.