jquery - 使用表单的 jQuery UI 对话框

Question

我有以下代码：

HTML

<form action="" method="post" accept-charset="utf-8" class="button-to-delete">
    <input type="submit" name="delete" value="Delete" class="btn btn-danger" />
</form>

<div class="hidden-dialog" title="Delete product">
    <p>Are you sure that you want to delete thi product?</p>
    <p>Green Lantern T-Shirt</p>
</div>

CSS

.hidden-dialog   { display: none; }​

JavaScript

$(document).ready(function() {
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $(this).prev('form.button-to-delete').submit(true);
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            }
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    }); 
});

这是 jsFiddle 版本：http: //jsfiddle.net/mdJZ8/1/

因此，当我单击表单按钮时，会出现一个带有消息和两个按钮的 jQuery UI 对话框：“是！” 和不！”。“不！” 按钮正常工作。“是！” 另一方面，按钮没有。它应该提交表单，但它没有。我怀疑问题出在return false声明中。但是，如果我删除该语句，则对话框会出现片刻，并且表单会被提交，而不会让用户有机会选择一个选项。如何修复此代码，使其仅在用户单击“是！”时才提交表单 请问按钮？

Answer 1

我想您可以将 JS 替换为：

 $(document).ready(function() {

 var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                return true;
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
                return false;
            }
        }
    }
});

$('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    return dialog.dialog('open');
}); 

});

Answer 2

如何关闭模态对话框的可见性？

$(document).ready(function() {
  var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        'Yes!' : {
            class: 'btn btn-danger',
            text: 'Yes!',
            click: function () {
                $(this).prev('form.button-to-delete').submit();
            }
        },
        'No!' : {
            class: 'btn',
            text: 'No!',
            click: function () {
                $(this).dialog("close");
            }
        }
    }
  });

  $('form.button-to-delete').submit(function() {
    var targetURL = $(this).attr("href");

    if($('div.hidden-dialog').is(':visible')) {
      return true;
    }

    dialog.dialog('open');
    return false;

  }); 
});

Answer 3

我发现出了什么问题。我需要做的是使用以下语句：

$('form.button-to-delete').unbind("submit").submit();

这是完整的 jQuery 脚本：

$(document).ready(function() {    
    var dialog = $('form.button-to-delete + div.hidden-dialog').dialog({
        resizable: false,
        autoOpen: false,
        modal: true,
        buttons: {
            'Yes!' : {
                class: 'btn btn-danger',
                text: 'Yes!',
                click: function () {
                    $('form.button-to-delete').unbind("submit").submit();
                }
            },
            'No!' : {
                class: 'btn',
                text: 'No!',
                click: function () {
                    $(this).dialog("close");
                }
            },
        }
    });

    $('form.button-to-delete').submit(function() {
        var targetURL = $(this).attr("href");

        dialog.dialog('open');
        return false;
    });
});