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.