jqueryUIを使ったダイヤログを実装するとダイヤログがすぐに閉じてしまう。

Question

###前提・実現したいこと
jqueryUIを使ったダイヤログの実装。ボタンを押したときに、OKとキャンセルも表示したいです。
###発生している問題・エラーメッセージ

現在、jqueryUIを使ったダイヤログを実装したのですが、ダイヤログを起動するボタンを押すと一瞬だけダイヤログが
表れ、OKボタンを押す暇もなく消えてしまいます。

色々なサイトを調べたのですが、同じ条件のエラーが人がいなく困っています。
下記にソースを記載しますので、よろしくお願い致します。

###該当のソースコード

<form action="" method="POST">
	<p><textarea id="test" name="test" cols="40" rows="4" maxlength="20" placeholder=""></textarea></p>
	<p><button id="opener" type="submit">送信</button></p>
</form>
<div id="dialog" title="送信"><p>送信します。宜しいですか？</p></div>

###該当のソースコード

$("#dialog").dialog({
	autoOpen: false,
	width: 400,
	buttons: [
		{
			text: "Ok",
			click: function() {
				$( this ).dialog( "close" );
			}
		},
		{
			text: "Cancel",
			click: function() {
				$( this ).dialog( "close" );
			}
		}
	]
});

$("#opener").button();
$("#opener").click(function() {
	if ($("#test").val() != '') {
		$("#dialog").dialog("open");
	}
});

###補足情報(言語/FW/ツール等のバージョンなど)
jquery-ui-1.11.4

Answer 1

buttonのデフォルトの動作が発生しているからformがpostされてページがリロードされるているのが原因だと思いあます。
以下のように修正すると解決します。

    $("#opener").click(function(e) {
        e.preventDefault(); // デフォルトの動作をさせない
        $("#dialog").dialog("open");
    });

Comments

[hiroppii]

回答有難う御座います。

無事に動作しました。

有難う御座います。

Answer 2

消えてしまうというのはページが移動してしまうということですか？コードを見る限り、本来のsubmitボタンのclickイベントを停止させていないからだと思います。止めるためにはclickに登録するfunctionにeventを受け取るための引数を増やす必要があります。

$("#opener").submit(function(e) {// eventを受け取るための変数e
    if ($("#test").val() != '') {
        $("#dialog").dialog("open");
    }
    e.preventDefault();//本来のクリックによるフォーム送信を止める
});

Comments

[hiroppii]

回答有難う御座います。

こちらの方法で試したのですが、私の環境ではうまく動作しませんでした。

[masaya_ohashi]

あー、そういえばsubmitイベントを取らないとエンター押されると止められないからだめだよなーと試行錯誤した途中のコードのままになっていました。
たぶんいまのそちらのコードだと、テキストフィールドでエンター押されるとダイアログが出ずにpostされてしまうのでお気をつけ下さい。