0

In view page:

@using (Ajax.BeginForm("UpdateAccount", "AccountInfo", new AjaxOptions {
    HttpMethod = "POST",
    AllowCache = false,
    OnSuccess = "accountUpdateRequestSuccess",
    OnFailure = "formSubmissionFailed",
    OnBegin = "validateAccountInformation"
}))

validateAccountInformation function is stated below:

function validateAccountInformation() {
if (error.length > 0) {
    showErrorNotification(errorListHtml);
    return false;
}
else {
    if ( Some Conditions ) {
        bootbox.confirm({
            title: "Confirm",
            size: "medium",
            message: "Some Message",
            callback: function (result) {
                if (result) {
                    Some Code
                }
                else {
                    Some Code
                }
            }
        });
    }        
}

When Save button is clicked, at first validateAccountInformation function is called. If there's no error it will raise a Bootbox. If Bootbox OK button is clicked it'll submit the form with certain values or if Bootbox CANCEL button is clicked it'll submit the form with certain values different than before.

Now, the problem I'm facing is, when user clicks SAVE button it goes to validateAccountInformation function. And if there is no errors it calls Bootbox.Confirm. What I've expected that form submission will be held until some OK/CANCEL button is clicked in Bootbox. But it does not wait for Bootbox. Meaning Bootbox callback function is never called. It might have something to do with AJAX being asynchronous.

I've used javascript confirm method. And this method does hold form submission.

function validateAccountInformation() {
    if (error.length > 0) {
        showErrorNotification(errorListHtml);
        return false;
    }
    else {
        if ( Some Conditions ) {
            if (confirm("check")) {
                some code
            }
        }
    }
}

Is there some way where I can use Bootbox Confirmation box with Ajax Begin Form as per scenario described above?

1
  • Prevent the default action: $('form').submit(function (e) { e.preventDefault(); ... } then call form.submit when needed after bootbox. Jan 30, 2020 at 15:50

1 Answer 1

0

I've changed the flow and have been able to integrate Bootbox. What I've done is, I've omitted the onBegin function. So my view page looks like this

@using (Ajax.BeginForm("UpdateAccount", "AccountInfo", new AjaxOptions {
     HttpMethod = "POST",
     AllowCache = false,
     OnSuccess = "accountUpdateRequestSuccess",
     OnFailure = "formSubmissionFailed",
 }))

Now I've added a function which is fired by onclick event of this forms summit button. And integrated validateAccountInformation function and Bootbox within this function. Now the important part here is, this function always returns false. By returning false I've managed to hold on the form submission. Now the onClick event function looks like

$(document).on('click', '#btn-edit-account-save', function () {
     var submit = validateAccountInformation(); 
     some code   
     if (submit == true) {
         if (some condition) 
         {
             $('Form').submit();
         }
         else 
         {
             bootbox.confirm(
             {
                 title: "Confirm",
                 size: "medium",
                 message: "Some Message",
                 callback: function (result) 
                 {
                     if (result) 
                     {
                         $('Form').submit();
                     }
                     else 
                     {
                         some code
                     }
                 }
             });
         } 
     }
     return false;
});
1
  • Bootbox modals can't block your UI thread - they're just Bootstrap modals, which themselves are just positioned divs. This is more or less covered in the documentation page: bootboxjs.com/documentation.html
    – Tieson T.
    Feb 1, 2020 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.