Discussion :

[verbose]

Bonjour, avant d'afficher une jsp, je dois faire un traitement qui peut durer une minute. Je souhaiterais donc afficher une image type sablier pour informer que le traitement est en cours.

Je ne sais pas du tout comment faire, pouvez-vous m'indiquer comment procéder ? Faut-il recourir à JavaScript ou bien est-ce que le contrôle se fait côté serveur ?

[link256]

Salut,

Je dois faire un petit tuto à ce sujet depuis un petit bout de temps ^^

Il y a peut être d'autre solution mais je l'applique pour des traitement ou pour l'upload de document.

Le formulaire comprend :
- une div caché contenant un message et un petit gif animé d'un sablier qui apparait à la validation du formulaire.
- un target vers une autre div caché vide
- la validation du formulaire par sur le post d'une servlet
- le formulaire est validé via javascript

Dans le doPost de la servlet je fais le traitement et je marque en session l'état d'avancement du traitement.

Dans le doGet je génère un flux xml en fonction de la valeur récupérer en session sur l'avancement du traitement.

Code :

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

response.setContentType("text/xml");

Le doGet est appelé via XMLRequest à partir du formulaire avec un appel toutes les X secondes en fonction de la taille du traitement (le paramètre X pouvant être passé dans le flux XML)

lorsque le traitement est fini supression de la target et changement de l'action du formulaire pour passé à l'écran suivant.

Un bout de code AJAX

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
var req;
 
			function ajaxFunction()
			{		
			    var url = "<%=request.getContextPath()%>/ServletDoGet";
 
			    if (window.XMLHttpRequest) // Non-IE browsers
			    { 	    	
			        req = new XMLHttpRequest();
 
					try 
			        {
			            req.open("GET", url, true);
			            req.onreadystatechange = function()
			            {
				    		if (req.readyState == 4)
				    		{
						      processStateChange();
				    		}
				  		}
				 	} 
			        catch (e) 
			        {
			            alert(e);
			        }
			        req.send(null);
 
			    } 
			    else if (window.ActiveXObject) // IE Browsers
			    { 
			        req = new ActiveXObject("Microsoft.XMLHTTP");
 
			        if (req) 
			        {
			            req.onReadyStateChange = processStateChange;
			            req.open("GET", url, true);
			            req.send();
			        }
			    }	    
			}

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
function processStateChange()
{
	/**
	*  State    Description
	*    0      The request is not initialized
	*    1      The request has been set up
	*    2      The request has been sent
	*    3      The request is in process
	*    4      The request is complete
	*/
 
	if (req.readyState == 4)
	{
		if (req.status == 200) // OK response
		{
			var xml = req.responseXML;
 
			var etatTraitement = xml.getElementsByTagName("traitement")[0];	
			var raffraichissement = xml.getElementsByTagName("rafraichissement%>")[0];
 
			if (etatTraitement == null)//étape initialisation
				{			            	
					if(raffraichissement==null)
						window.setTimeout("ajaxFunction();", 2000);			            	
					else
						window.setTimeout("ajaxFunction();", raffraichissement.firstChild.data);			            	
 
				}
				else
				{
					var etatDuTraitement = etatTraitement.firstChild.data;
					if(etatDuTraitement=="terminer")
					{
						document.monForm.action = "actionAffichage.do";
						document.monForm.target="";				
						document.monForm.submit();
					}		
				}
		}	
	}
}

En esperant que cela te mette sur la voix si tu as d'autre question hésite pas

[verbose]

Je ne suis pas une bête en html, mais si on utilise un div caché, est-ce qu'on va pouvoir obtenir une superposition de l'animation sur la page de fond lorsqu'elle s'affichera ?

[Mengué georges]

Bonjour

Exactement, tu mets ton sablier dans un div caché et avant de lancer le traitement tu affiches le div.

[link256]

Tu mets la div caché contenant le sablier en position:absolute tu peux aussi jouer sur le z-index ainsi que sur l'opacité des élément de ta page en diminuant celle des éléments qui sont en arrière plan.

[OButterlin]

Il faut tout de même préciser que le "sablier" doit être afficher par la page appelante (phase request) pas dans la page cible (après response), il sera trop tard...