> I have been using blockUI with ajaxForm for quite a while and I
> normally use the block() function from within the beforeSubmit
> callback and it works really well.
>
> I now want to extend this a little by producing a quick blockUI
> confirm message which if yes is clicked will return true and submit
> the form and if no is click it returns false and doesn't submit the
> form.
>
> I have used the Modal Dialog demo on the blockUI site as a starting
> point but I can't get it to work. It either pops up the confirm
> message and then submits the form and unblocks or it shows the confirm
> and clicking yes shows the save message but it doesn't submit the
> form.
>
> Also when trying to replace one message with another it just seems to
> overlay the previous message rather than replacing.
>
> Some code:
>
> // pre-submit callback
> function showRequest(formData, jqForm, options) {
> if(validForm()) {
> $(function() {
> $('#chcouncilcontainer').block({message:
> $('#confirmch')});
> $('#yes').click(function() {
> $('#chcouncilcontainer').block({message: '<div
> class="quick-alert">Saving...</div>'});
> return true;
> });
> $('#no').click(function() {
> $('#chcouncilcontainer').unblock();
> return false;
> });
> });
> } else {
> $('#chcouncilcontainer').unblock();
> return false;
> }
>
> }
>
> My confirmch div is like this:
>
> <div id="confirmch" style="display:none; cursor: default" class="quick-
> alert">
> <h1>Are you sure you want to give Church Meeting Authorisation?
> </h1>
> <input type="button" id="confirmchyes" value="Yes" />
> <input type="button" id="confirmchno" value="No" />
> </div>
>
> Can anyone point me in the right direction? I can't seem to work out
> how to only return when the button yes or no is clicked otherwise I
> want the submit action to wait.
>
> Cheers,
>
> Dave
Hi Dave,
You need to get a bit sneaky with this one. Here's an approach (which
assumes jQuery v1.2.3 or later):
$(function() {
function onBeforeSubmit(formData, $form, options) {
// stash form ref for use in onComplete
options.theForm = $form;
if ($form.data('alreadyValidated'))
return true;
var $container = $('#chcouncilcontainer');
if(validForm()) {
$form.data('alreadyValidated',true);
$container.block({ message: $('#confirmch') });
$('#confirmchyes').unbind().click(function() {
$container.unblock({fadeOut:0}).block({message: '<div
class="quick-alert">Saving...</div>'});
// reinvoke the submit
$form.submit();
return false;
});
$('#confirmchno').unbind().click(function() {
$form.data('alreadyValidated',false);
$container.unblock();
return false;
});
}
else {
// alert('Invalid form data.');
$container.unblock();
}
// always return false here so the form does not submit
return false;
}
function onComplete() {
var $form = this.theForm;
// reset flag
$form.data('alreadyValidated',false);
$('#chcouncilcontainer').unblock();
}
$('#myForm').ajaxForm({
beforeSubmit: onBeforeSubmit,
complete: onComplete
});
});
