表单提交上的jQueryUI模式确认对话框

时间:2010-04-14 12:11:57

标签: jquery jquery-ui

我正在尝试在用户提交表单时使用模式确认对话框。我的逻辑思路是,我的方法是抓住表单提交。我的代码如下,

$('#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。

不选中此框,显示并提醒。可能会在某个时候更改为对话框;),单击“取消”关闭对话框并保留在页面上,但难以捉摸的“确认”按钮似乎不会继续表单提交事件。

如果有人可以提供帮助,我很高兴与您共享午餐! ;)

2 个答案:

答案 0 :(得分:3)

在对话框中执行.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;
});

答案 1 :(得分:2)

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

    /*
 * 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;
});