表单提交时的 jQueryUI 模态确认对话框答案

【问题标题】：jQueryUI Modal confirmation dialog on form submission表单提交时的 jQueryUI 模态确认对话框
【发布时间】：2011-02-07 21:27:01
【问题描述】：

我正在尝试在用户提交表单时让模态确认对话框正常工作。从逻辑上讲，我的方法是捕获表单提交。我的代码如下，

$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            //$(this).dialog('close');
            return true;
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

$('#completeform').submit(function(e){
    e.preventDefault();
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            $('#multi-dialog-confirm').dialog('open');
        }
    }
    //return false;
});

所以我先设置我的对话框。这是因为我很确定对话框的范围需要与调用它的函数处于同一级别。

但是，问题是当您单击“确认”时，没有任何反应。提交操作不会继续。我也试过$('#completeform').submit();，但这似乎不起作用。我已经尝试删除 .preventDefault() 以确保表单提交不会被完全取消，但这似乎与返回 false 没有区别。

不选中该框，显示并提醒很好。在某些时候可能会更改为对话框；），单击“取消”会关闭对话框并保留在页面上，但难以捉摸的“确认”按钮似乎无法继续提交表单事件。

如果有人可以提供帮助，我很乐意与您分享我的午餐！ ;)

【问题讨论】：

解决方案很简单！通过在函数中使用 document.formname.submit()，我可以绕过 jQuery 范围，直接提交表单，效果很好！一个火腿三明治的神奇之处
我认为这是一种解决方法，而不是解决方案。我建议您尝试理解我的解决方案并改用它，因为它是合乎逻辑的，因此以更一致的方式工作。

标签： jquery jquery-ui

【解决方案1】：

我想我应该在这里包含我的代码，以防有人发现它有帮助。

    /*
 * Setup the confirm multiple completions dialog
 */
$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            $(this).dialog('close');
            document.completeform.submit();
        },
        'Cancel': function(){
            $(this).dialog('close');
            return false;
        }
    }
});

/*
 * When completing an item on the search page, validate and confirm
 */
$('#completeform').submit(function(e){
    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            e.preventDefault();
            $('#multi-dialog-confirm').dialog('open');
        }else{
            return true;
        }
    }
    //return false;
});

【讨论】：

【解决方案2】：

在对话框中执行.submit时，再次执行提交代码。

试试这个：

$('#multi-dialog-confirm').dialog({
    autoOpen: false,
    height: 200,
    modal: true,
    resizable: false,
    buttons: {
        'Confirm': function(){
            dialogueIsSubmitting = true;
            $('#completeform').submit();
            return false;
        },
        'Cancel': function(){
            dialogueOpen = false;
            $(this).dialog('close');
            return false;
        }
    }
});

var dialogueIsSubmitting = false;

$('#completeform').submit(function(e){
    if(dialogueIsSubmitting) return true;

    var n = $('#completeform input:checked').length;

    if(n == 0){
        alert("Please check the item and mark as complete");
        return false;
    }else{
        var q = $('#completeform #qty').html();
        if(q > 1){
            $('#multi-dialog-confirm').dialog('open');
        }
    }
    return false;
});

【讨论】：