Afficher une message d'attente lors d'un appel ajax

Version imprimable

05/11/2007, 20h29
Nulenprogra

Afficher une message d'attente lors d'un appel ajax

Bonsoir,

voilà, quand je fais un appel ajax, je voudrais le faire en synchrone et afficher un message d'attente pendant le traitement.

j'ai une DIV avec le message "sauvegarde en cours" qui existe sur la page.

lors du démarrage de la sauvegarde (clic sur un bouton qui appel la fonction ajax), je rend la DIV visible, et à la fin du traitement, je la rend hidden.

Mais, en fait, dans la réalité, quand je clic sur mon bouton, il s'enfonce, rien n'apparait à l'écran, et puis il me rend la main.

dois-je faire un "refresh" ou quelque chose pour que la div s'affiche ?

merci
05/11/2007, 22h19
arkandias

En rendant le DIV visible avant d'effectuer la fonction Ajax, et en le rendant invisible après la fin, ca ne marche pas ?
05/11/2007, 22h40
Zoons

J'ai le même problème.

En début de fonction j,affecte mes DIV avec le style visible et après j'effectue ma fonction httpRequest.

Mais mon DIV d'attente ne s'affiche pas.
06/11/2007, 08h47
SpaceFrog

Ne le fait pas lors du démarrage, mais juste avant ...

Ben je le fais avant les appels ajax, mais j'ai l'impression qu'il n'a pas le temps de l'afficher.

il faut peut-être un genre de sleep ou un refresh avant ?

voici ma fonction:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function save_plan(param){
 
	document.getElementById('div_sauvegarde').style.visibility='visible';
 
	var xhr = getXMLHTTP();
	xhr.onreadystatechange = function(){
		alert(xhr.readyState);
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
		}
	}
	xhr.open("POST","save_local_fire.php",false);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(param);
	document.getElementById('div_sauvegarde').style.visibility='hidden';
}

06/11/2007, 17h26
arkandias

Essaie en mettant un setTimeout ?

j'ai essayé plusieurs options, sans trouver le bon résultat.

j'ai essayé ceci (en séparant les deux fonctions):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function save_et_message(param){
	document.getElementById('div_sauvegarde').style.visibility='visible';
	save_plan(param);
	document.getElementById('div_sauvegarde').style.visibility='hidden';
}
 
function save_plan(param){
 
	var xhr = getXMLHTTP();
	// 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
		alert(xhr.readyState);
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
		}
	}
	// le dernier param est FALSE pour un dialogue synchrone = attend la réponse du serveur
	xhr.open("POST","save_local_fire.php",false);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(param);
}

et puis une variante avec un setTimeout:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function save_et_message(param){
	document.getElementById('div_sauvegarde').style.visibility='visible';
	setTimeout("save_plan(\""+param+"\")",1);
	document.getElementById('div_sauvegarde').style.visibility='hidden';
}
 
function save_plan(param){
 
	var xhr = getXMLHTTP();
	// 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
		alert(xhr.readyState);
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
		}
	}
	// le dernier param est FALSE pour un dialogue synchrone = attend la réponse du serveur
	xhr.open("POST","save_local_fire.php",false);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send(param);
}

d'autres idées ?

06/11/2007, 22h05
arkandias

Bon admettons...

Code:

document.getElementById('div_sauvegarde').style.visibility='hidden';

Ca tu le déplace quand tu as le résultat de ta requete Ajax ;)

Et ensuite essaie avec des temps de setTimeout plus long genre 200ms... ca te donne quoi exactement ?

Bonsoir,

voilà, après des recherches sur le net, j'ai la solution:

il faut mettre le visible et l'appel de la fonction dans une fonction, et à la fin de l'autre fonction le hidden.

il faut que le browser sorte de la fonction avant d'appeler la sauvegarde ajax

voilà
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function save_et_message(param){ document.getElementById('div_sauvegarde').style.visibility='visible'; window.setTimeout("save_plan(\""+param+"\")",1); } function save_plan(param){ var xhr = getXMLHTTP(); xhr.onreadystatechange = function(){ alert(xhr.readyState); if(xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } } xhr.open("POST","save_local_fire.php",false); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(param); document.getElementById('div_sauvegarde').style.visibility='hidden'; }

06/11/2007, 22h08
Nulenprogra

Arkandias, tu as entièrement raison !

j'ai trouvé la soluce pendant que tu la publiais ;-)

Merci !
06/11/2007, 22h15
arkandias

Oui :D

Eh ben de rien, bonne soirée !