1

はいまたはいいえの確認のために作業しようとしている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 秒間表示されてから消え、フォームが送信されます。私が間違っているところを指摘してください

ここでjsfiddleで実行しました

ありがとうポール

4

1 に答える 1

2

送信機能に呼び出しがないreturn falseか、preventDefault()呼び出しがあるため、ダイアログはすぐに消えます。見る：

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

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

これがないと、ダイアログが表示された後にフォームの送信が自動的に行われます。

編集：

さらに、ダイアログの [はい] ボタン ハンドラーでフォームを送信するときに、もう一度送信関数を呼び出すことになり、すぐにダイアログが再表示されます。

フォームで送信を呼び出す前に、ユーザーの確認を保存する必要があります。例えば：

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 に答える