Plugin BlockUI et confirm (sur onsubmit) [Résolu]

[Asaiel]

Bonjour à tous,

Je m'interesse depuis très peu de temps à l'utilisation de JQuery (je suis donc totalement novice à ce sujet, et très peu expérimenté en JS), et je rencontre actuellement un problème avec l'utilisation du plugin BlockUI (disponible ici).

• Le contexte:

Lorsqu'un formulaire est posté sur mon site, je souhaite que le plugin BlockUI s'active, "verrouille" mon UI avec un msg d'attente le temps de l'exécution du POST, puis redonne la main à l'utilisateur.

• Le problème:

Dans l'un de mes formulaire, j'utilise une fonction confirm sur l'évènement Onsubmit.
Lorsque mon formulaire est posté, la pile des évènements est alimentée dans cet ordre:

• Confirm affiche la DialogBox demandant la validation utilisateur
• BlockUI "verrouille" l'interface

Si l'utilisateur clique sur OK, tout se passe bien. S'il clique sur Annuler, l'écran reste verrouillé définitivement.

Je crois comprendre que le fait de cliquer sur le bouton Annuler n'entraine pas le déclenchement de l'évènement AjaxStop. Il me faudrait donc "capturer" dans ma fonction javascript l'annulation de la fonction submit...

• Le code:

Dans ma page principale:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript"> 
 
    // unblock when ajax activity stops 
    $(document).ajaxStop($.unblockUI); 
 
    $(document).ready(function() { 
    	$('#bt_logout').click(function() {
			$.blockUI(); 
		});
 
    	$('form').submit(function() {
			$.blockUI(); 
		});
    }); 
 
</script>

Dans mon formulaire:

Code :

<form name="frm_man_part" id="frm_man_part" method="post" action="" onsubmit="return confirm('Confirmer votre participation pour cet article ?');">{...}</form>

Toute aide gentiment et clairement expliquée sera la bienvenue

Merci d'avance,

Asaiel

[danielhagnoul]

Bonsoir

Je vous suggère de tester le code suivant :

Code :

1
2
3
4
5
6
7
8
9
$('form').submit(function(){
	var boolSubmit = confirm('Confirmer votre participation pour cet article ?');
 
	if (boolSubmit){
		$.blockUI();
	}
 
	return boolSubmit; // false = pas de soumission
});

[Asaiel]

Bonjour, et merci beaucoup pour votre aide.

C'est tout a fait dans l'idée de ce que je cherche, mais il reste néanmoins un problème:

Le code suivant s'applique à tous les formulaires du site pouvant être postés:

Code :

1
2
3
$('form').submit(function() {
	$.blockUI(); 
});

Hors, tous ne requiert pas une confirmation, et pour ceux dont c'est le cas, tous ne requiert pas le même message...

Idéalement, il faudrait pouvoir passer en paramètre le message à afficher (avec un test sur la valeur), mais ma fonction submit() n'est jamais explicitement appelée dans mes formulaires...

[danielhagnoul]

Bonsoir

Pour les formulaires, on doit pouvoir leur donner une classe spécifique et ensuite traiter chaque classe de formulaire séparément. Ce n'est pas génial, mais je n'ai pas d'autres idées.

[Asaiel]

C'est une solution possible en effet.

De mon coté, en cherchant un peu (pas mal en fait ), j'ai réussi à écrire un script qui devrait fonctionner, et sur lequel j'aimerais avoir votre avis:

Page principale:

Code :

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
<script type="text/javascript">
 
	var boolSubmit=true;
 
	function confirm_form(txt_confirm){
		boolSubmit = confirm(txt_confirm);
 
	        return boolSubmit; // false = pas de soumission
        }
 
    // unblock when ajax activity stops 
    $(document).ajaxStop($.unblockUI); 
 
    $(document).ready(function() { 
    	$('#bt_logout').click(function() {
			$.blockUI(); 
		});
 
    	$('form').submit(function() {
			if(!boolSubmit){
				$.unblockUI();
			}
			else{
				$.blockUI();
			}
		});
    });
 
</script>

Formulaire:

Code :

<form name="frm_man_part" id="frm_man_part" method="post" action="" onsubmit="return confirm_form('Confirmer votre participation pour cet article ?');">{...}</form>

[danielhagnoul]

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
 * c'est la méthode submit qui doit
 * retourner true (par défaut) ou false
 */ 
$('form').submit(function() {
	if(!boolSubmit){
		$.unblockUI();
	}
	else{
		$.blockUI();
	}
 
	return boolSubmit;
});

[Asaiel]

En effet, c'est plus propre comme ça.

Du coup, mon problème est résolu. Un grand merci pour votre aide