Discussion :

[allex2108]

Bonjour,

Avant la soumission d'un formulaire par un click sur mon bouton valider, je fais une série de contrôles qui dure environ 10 à 15 secondes. Afin de notifier l'utilisateur qu'un traitement est en cours, je modifie le style de mon curseur afin de faire apparaître un sablier.
Je déclenche la modification du curseur au début de l'évenement (1ère ligne de code), mais mon curseur n'est modifié qu'en fin de traitement, juste avant le submit. Du coup, cela ne sert à rien.

Je ne comprends pas pourquoi, alors que le changement est la 1ère instruction, le curseur n'est pas modifié de suite.

J'ai essayé plusieurs solutions (changement du style sur le body, le style du bouton également, le style de l'ensemble des contrôles du formulaire..)
Rien ne fonctionne. Y'a-t-il une instruction supplémentaire à implémenter immédiatement après le changement de style, afin de "rafraîchir" l'affichage ?

Merci de votre aide.

[gKsam]

Un peu de code serait le bien venu. Car là, à part le fait que l'utilisateur doit attendre 10 à 15 secondes. Je ne vois pas le problème.

Il doit y en avoir des choses à vérifier???

Je te dis ça car je suis en plein dedans aussi. La partie serveur en PHP fonctionne très bien et là, je fignole la partie DHTML. Mais 10 à 15 secondes cela me laisse septique.

[allex2108]

Dans le PHP

Code :

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

1
2
3
 
print("<input type='button' id='PB_valider' value=Valider 
	  onclick='pb_click(this)' />");

Dans le JS

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 pb_click(ctrl)
{
	var formulaire = ctrl.form;
	ctrl.style.cursor = 'wait';
	//document.body.style.cursor = 'wait';
	//for (var i=0; i<formulaire.length ; i++) {formulaire[i].style.cursor = 'wait';}
 
	//là il ya des requetes de controles et de maj en Ajax 
	//(je ne mets pas tout le code)
	//c là que le traiement dure 10 à 15 secondes.
 
	ctrl.form.submit();
}

[gKsam]

Quand tu mets

Code :

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

ctrl.style.cursor = 'wait';

J'aurais mis

Code :

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

document.body.style.cursor = 'wait'

mais apparemment tu l'as déjà fait.

Ce qui normalement change le curseur quand tu survol partout sur la page sauf aux endroits où tu peux cliquer. Donc pendant ton traitement si tu positionnes ta souris sur une zone non cliquable cela devrait de mettre le sablier.

Ensuite ton formulaire est envoyé et on passe donc à d'autres aventures.

[allex2108]

La ligne de code

Code :

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

ctrl.style.cursor = 'wait';

permet de modifier le style du curseur si l'utilisateur clique et ne bouge pas la position de la souris du bouton.
Justemment, l'objet de mon post, est que durant le traitement, le curseur ne change pas.

[gKsam]

Donc, tu veux éviter que l'utilisateur clique quelque part pendant le traitement et qu'après le traitement le formulaire soit envoyé.

Peut être une autre piste alors => créer un claque de la taille de la page avec un message ou autre pendant le traitement. Je dirai à la sourceforge.

Comme ça information pour l'utilisateur, traitement et envoi de ton formulaire.

sinon au passage :

en PHP

Code :

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

1
2
print("<input type='button' id='PB_valider' value=Valider 
	  onclick='pb_click()' />");

et dans le js :

Code :

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

1
2
3
4
5
6
7
8
function pb_click()
{
	var formulaire = this.form;
	this.style.cursor = 'wait';
        ....
        ....
	formulaire.submit();
}

quand tu lances une methode par onclic et le reste. Dans la méthode, le this est l'élément à partir duquel tu as lancé cette méhtode.

[FremyCompany]

Bon j'ai pas regardé ton code mais tu dois essayer ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var This=this;
setTimeout(function() {
   // Ta ou tes lignes pour changer le curseur
   // Attention que tout ce qui se réfère à this sera faux
   // C'est pourquoi on crée var This qui vaut this
   try { window.recalc(); } catch (ex) {
     try { window.update() } catch (ex) {
       window.focus();
     }
   }
}, 0)
// Le reste du code

Si ca marche pas, faudra faire l'inverse :

Code :

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

1
2
3
4
5
var This=this
// Ta ligne pour changer le cursuer
setTimout(function() {
   // Le reste du code (this ==> This)
}, 0)