Discussion :

[skillipo]

bonjour,

Dans ma JSP j'ai un button avec onClick qui appel une Fuction javaScript, il se trouve que quand je click dessus par exemple 2 fois l'action s'execute 2 fois .

Ya t'il un moyen de limiter le click a 1seul click par exemple.

ou par exemple Grisé le boutton apres le click ??

Merci

[mattheox]

1) tu peux récupérer l'événement du double-clic en javascript :

Code :

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

onDoubleClick="return false;"

2) tu peux cacher le bouton lors du clic et le remplacer par du texte/image non cliquable en javascript sur l'événement onclick

comme ça... une seule soumission sera possible

[Lorantus]

Personnelement,

le bouton demande un traitement (et donc un résultat) au serveur. J'ai donc entièrement grisé la page.

L'utilisateur clic sur le bouton et attend la réponse. Si le temps d'attente est trop grand (0.8s), la page devient toute grise. J'utilise pour cela un motif semi-transparent, avec un CSS(z-order) au-dessus des éléments HTML. Le bouton est bloqué et le reste le page aussi d'ailleurs.

[skillipo]

Bonjour Lorantus,

peut tu me donner le code pour griser le bouton .

cordialement

[Lorantus]

Un peu tard, mais bon, pour la connaissance :
- le fichier .js (j'ajoute un message d'attente):

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
 
var loadingTimeOut=800;
var loadingAnim="../../skins/shinny.black/images/indicator.gif";
var loadingInfo="Chargement en cours.";
 
window.onbeforeunload=function(){
    if(loadingTimeOut>0)
        setTimeout('loading()',loadingTimeOut);
    if(loadingTimeOut==0)
        loading();
}
 
function loading(){
    var el0=document.createElement("div");
    el0.id="loading";
    var el1=document.createElement("div");
    el1.id="infoBox";
    if(loadingAnim!=null && loadingAnim!="")
        el1.innerHTML="<img src='"+loadingAnim+"'/>&nbsp;";
    el1.innerHTML+=loadingInfo;
    el0.appendChild(el1);
 
    el0.style.height=document.body.scrollHeight;
    el0.style.width=document.body.clientWidth;
    document.body.appendChild(el0);
    el1.style.top=document.body.scrollTop+100;
}

-et un .css pour agrémenter cela :

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
 
/* 
    Document   : loading
    Created on : 9 avril 2007, 10:21
    Author     : Lorantus
    Description:
        loading plug-in css.
*/
#loading{
    background-image: url(../images/semi-transparent.gif);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
}
 
#loading #infoBox{
    background-color: #E0E0E0;
    border: 1px solid black;
    font-size: 80%;
    font-weight: bold;
    height: 1em;
    left: 100px;
    padding: 5px;
    position: absolute;
    top: 100px;
    vertical-align: top;
    width: 200px;
}