jquery UI确认对话框消失

Question

有人可以帮助我尝试使用 jQueryUI 对话框来确认是或否

    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script>

        $(function () {

            $("#dialog").dialog({
                autoOpen: false,
                resizable: false,
                height: 240,
                modal: true,
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                },
                buttons: {
                    "Yes": function () {
                        $(this).dialog("close");
                        $('#searchForm').submit();
                    },
                    "No": function () {
                        $(this).dialog("close");
                        return false
                    }
                }
            });
        });
        $(function () {
            $('#searchForm').submit(function () {

                $("#dialog").dialog("open");

            });
        });
</script>


    <div id="dialog" title="Confirm Terms?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Click YES to accept the Terms of Use</p>
</div>
       <form action="#" id="searchForm" method="post" name="searchForm">
            <input id="firstname" name="firstname" style="width: 140px;" type="text" value="paul" />
            <input id="surname" name="surname" style="width: 140px;" type="text" value="east" />
            <input id="address" name="address" style="width: 490px;" type="text" value="" />
            <input type="submit" value="Filter" />

                  </form>

每次单击提交按钮时，对话框都会出现大约 1 秒钟，然后消失并提交表单。请你指出我哪里出错了

I have ran it in jsfiddle here

谢谢保罗

Answer 1

对话框立即消失，因为您的提交函数没有return false 或没有preventDefault() 调用。见：

http://api.jquery.com/submit/

http://api.jquery.com/event.preventDefault/

如果没有这个，表单提交将在您的对话框显示后自动发生。

编辑：

此外，当在对话框 Yes 按钮处理程序中提交表单时，您将再次调用提交函数，这将立即重新显示对话框 - 可能不是您想要的！

在表单上调用 submit 之前，您必须存储用户的确认信息。例如：

var reallySubmit = false;

...

buttons: {
    "Yes": function () {
        reallySubmit = true;
        $(this).dialog("close");
        $('#searchForm').submit();
    },

...

$('searchForm').submit(function () {
    if (!reallySubmit) {
        $("#dialog").dialog("open");
        return false;
    }
});

...