Skip to content

Submit only if a promise is resolved (beforeSubmit). #401

Closed
@Leftyx

Description

@Leftyx

Hello.
I would like to integrate http://bootboxjs.com/ as confirmation dialog before submitting my form (ajax).
I've tried to figure out how to implement something and came up with this solution.

When I create my options I add a callback (beforeSubmitPromise):

var options = {
    clearForm: false,
    data: {},
    // beforeSubmit: beforeSubmitting,
    beforeSubmitPromise: bootBoxConfirmPromise,
    success: function (result) {}
};
$('#formAbout').ajaxForm(options);

which calls a function which returns a promise:

function bootBoxConfirmPromise()
{
    var deferred = new jQuery.Deferred();

    bootbox.confirm("Are you sure you want to send this form ?", function (result) {
    if (result) {
        deferred.resolve(true);
    }
    else {
        deferred.reject(false);
    }
    });

    return deferred.promise();
}

and then I've changed the doAjaxSubmit function this way:

// private event handlers
function doAjaxSubmit(e) {
    /*jshint validthis:true */
    var options = e.data;
    if (!e.isDefaultPrevented()) { // if event has been canceled, don't proceed
        e.preventDefault();

        if (options.beforeSubmitPromise) {
        $.when(options.beforeSubmitPromise()).then(
           function (status) {
               $(e.target).ajaxSubmit(options); // #365
           },
           function (reason) {
               log('ajaxSubmit: submit aborted via beforeSubmitPromise. reason: ' + reason);
           });
        }
        else {
        $(e.target).ajaxSubmit(options); // #365
        }
    }
}

It seems to work but I don't know if it can be implemented in a better and proper way.

Thanks.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions