JQuery form plugin - User confirmation prompt prior to form submit?

We use the JQuery form plugin to sumit our forms:

    var options = {
            dataType: 'json',
            beforeSubmit:  createposPreSubmit,
            success:       createposPostSubmit,
            error: function(xhr) { handleError(xhr, 'Error in Create Pos grid form submission'); }
    };

    $('#form-createpos').ajaxForm(options);

We want to dispaly a proceed/cancel confirmation prompt using JQuery UI's dialog method prior to the form being submitted.

Problem is dialog is async, so we can't wait for the user's response. Thuse we are returning false from beforeSubmit. But I can't figure out how to trigger the form submit if the user chooses to continue:

These are the buttons in our modal dialog:

function createposPreSubmit(formData, jqForm, options) {

...

var buttons = {
    "Continue开发者_Go百科": function () {
        $(this).dialog("close");
        //HOW CAN WE SUBMIT FORM??  
        disableSubmit($("#submit-createpos"));
    },
    "Cancel": function() {
        $(this).dialog("close");
    }
};

//Show dialog

//Always return false
return false;
}

In the Continue button function jqForm.submit and jqForm[0] don't seem to work properly. jqForm[0] does seem to submit the form but the browser acts in a "bizarre" manner.

??

If I understand correctly, you want to 'pre-submit' your form so that when they accept, hopefully no more work needs to be done, or at the worst, they'd simply have to wait until the current request finishes.

I would recommend you use a global variable initially null and flag it true once they 'submit'. When you receive the callback from the 'pre-submit', check the state of the global variable. If it's true, proceed with submission. If it's false, do nothing. If it's null, means the call-back finished BEFORE they closed the dialog, meaning you'd need a second global variable initially null which you can set to true in such a case so that if you found it to be true in your 'Continue' button action, you'd know to proceed immediately rather than wait.

I'd expect your code to look something like:

var ajaxPreSubmitOk = null;
var dialogSubmitOk = null;
var buttons = {
    "Continue": function () {
        $(this).dialog("close");
        dialogSubmitOk = true;
        if(ajaxPreSubmitOk !== null && ajaxPreSubmitOk) {
            // Presubmit returned and everything is ok.. proceed!
            callSubmit();
        } else if (ajaxPreSubmitOk === null) {
            // Gotta wait still
            disableSubmit($("#submit-createpos"));
        }
    },
    "Cancel": function() {
        // Regardless of presubmit outcome, do nothing
        dialogSubmitOk = false;
        $(this).dialog("close");
    }
};

function ajaxFormCallback() {
    // If callback success 
    if(true) {
        ajaxPreSubmitOk = true;
        if(dialogSubmitOk !== null && dialogSubmitOk) {
            // User already clicked continue.  We're good!
            callSubmit();
        }
    // else callback fail
    } else {
        // Regardless of outcome, do nothing
        ajaxPreSubmitOk = false;
    } 
}

function callSubmit() {
    enableSubmit($("#submit-createpos"));
    ajaxPreSubmitOk = null;
    dialogSubmitOk = null;

    // What do do when everything goes as planned
}

I ended up using this approach:

$('#form-createpos').submit(function() {
    var options = {
        success: myfunc //WE DON'T NEED A PRESUBMIT HANDLER
    };

    var buttons = {
        "Continue": function () {
            $(this).dialog("close");
            theForm.ajaxSubmit(options);  //MANUALLY SUBMIT FORM 
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    };

    //Show JQuery dialog
});