1

Can someone help with the jQueryUI dialog box that I am trying to get to work for a confirmation yes or no

    <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>

Every time I click the submit button the dialog box appears for about 1 second then disappears and submits the form. Please can you point to where I am going wrong

I have ran it in jsfiddle here

thanks Paul

4

1 回答 1

2

该对话框立即消失，因为您的提交功能没有return false或没有preventDefault()调用。看：

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

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

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

编辑：

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

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

var reallySubmit = false;

...

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

...

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

...
于 2013-04-23T09:53:59.737 回答