Discussion :

[casho]

bonjour,
dans ma servlet, je doit exécuter un traitement qui peut être long. ce traitement est déclanché par un bouton qu'on active sur une page jsp. à la fin du traitement, j'aimerais qu'un message s'affiche sur la même page afin d'indiquer à l'utilisateur que le traitement en question s'est achevé. j'aimerais afin que l'utilisateur ne s'impatiente pas afficher sur la jsp une sorte de progression (par exemple par des points ou alors par un gif animé etc...) pour montrer que un traitrement est en cours et que l'utilisateur doit patienter.
comment puis-je procéder? quelqu'un peut-il avoir une idée?
Merci d'avance

[c_nvy]

Tu pourrais mettre un gif animé dans un div avec visibility:hidden dans le style, de manière à ce qu'il soit invisible par défaut.
Et ensuite, créer une fonction javascript qui le rend visible et qui serait appelée lors du clic sur le bouton via l'attribut onclick.

Code :

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

1
2
3
4
5
6
7
 
<script>
  function showGif() 
  { 
  document.getElementById("gif").style.visibility="visible"; 
  }
</script>

Code :

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

1
2
3
4
 
<div id="gif" style="visibility: hidden;left:...">
   <img src="tonGif.gif"/>
</div>

Code :

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

1
2
 
<input type="button" name="bouton" value="valider" onclick="showGif();">

Après, il ne te reste plus qu'à trouver le gif animé qui convient et à mettre les bonnes options dans le style (comme left, top, ...) pour positionner le gif au bon endroit dans la page.

Edit: pour les gifs animés, jette un oeil ici.

[bouchette63]

Bonjour,

Sinon il y a encore quelque chose de plus optimisé que ton idée c_nvy

On fait un loading du type GMAIL.
C'est à dire on a une balise div dans la page :

Code :

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

1
2
 
<div id="loading">Chargement en cours</div>

On lui ajoute des propriétés CSS :

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
 
#loading {
    background-color: #CC4444;
    color: White;
    width: 160px;
    height: 20px;
    font-size: 11pt;
    font-family: Arial;
    padding-left: 3px;
    display: none;
 
    top: 50%;
    left: 50%;
    margin-left: -80px;
    margin-top: -10xp;
}

Il est donc invisible par défaut.
Et lorsque tu charge tes infos tu met le display à block. Et le tour est joué.