Question

我们使用JQuery表单plugin来汇总表单：

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

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

我们希望在提交表单之前使用JQuery UI的dialog方法显示继续/取消确认提示。

问题是dialog是异步的，所以我们不能等待用户的回复。我们从false返回beforeSubmit。但是，如果用户选择继续，我无法弄清楚如何触发表单提交：

这些是模态对话框中的按钮：

function createposPreSubmit(formData, jqForm, options) {

...

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

//Show dialog

//Always return false
return false;
}

在“继续”按钮功能中jqForm.submit和jqForm[0]似乎无法正常工作。 jqForm[0]似乎确实提交了表单，但浏览器以“奇怪”的方式行事。

...

Answer 1

如果我理解正确，你想要“预先提交”你的表格，这样当他们接受时，希望不再需要做更多的工作，或者最坏的情况，他们只需要等到当前的请求完成。

我建议你使用一个最初为null的全局变量，并在提交后将其标记为true。当您从'pre-submit'收到回调时，请检查全局变量的状态。如果是真的，请继续提交。如果它是假的，什么也不做。如果它为null，则意味着在关闭对话框之前完成回调，这意味着您需要第二个全局变量，最初为null，在这种情况下您可以设置为true，这样如果您在“继续”中发现它为真'按钮动作，你知道立即行动而不是等待。

我希望您的代码看起来像：

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
}

Answer 2

我最终使用了这种方法：

$('#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
});

JQuery表单插件 - 表单提交前的用户确认提示？

2 个答案: