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/

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

修改

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

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

var reallySubmit = false; ... buttons: { "Yes": function () { reallySubmit = true; $(this).dialog("close"); $('#searchForm').submit(); }, ... $('searchForm').submit(function () { if (!reallySubmit) { $("#dialog").dialog("open"); return false; } }); ...

jqueryUI构造对话框消失

1 个答案: