JQuery-UIのダイアログボックスがカッコいいです。 ただ、formをsubmitするときの「ホントに登録しますか？」みたいな確認用のダイアログボックスをアレで実現しようとすると色々とややこしい問題が出てきました。 毎度毎度ややこしい問題と対峙しながら実装を繰り返すのは大変なのでJQueryのプラグインにしました。 ダウンロード使い方form要素のJQueryオブジェクトでconfirm()関数が使えるようになります。
$("form").confirm();
formタグの中にclass="dialog"のdivタグを書いておくと、submit時にそいつがダイアログボックスになって表示されます。 <form method="post"> <input type="text"/> <input type="submit" value="登録する"/> <div class="dialog">ホントにいいですか？</div> </form>
ダイアログには「OK」と「キャンセル」のボタンが配置されていて、「OK」が押されるとsubmitされます。「キャンセル」が押されるとダイアログを閉じます。 divタグにtitle属性をセットしておくと、ダイアログボックスのタイトルに設定されます。
<div class="dialog" title="確認ダイアログ">ホントにいいですか？</div>
submitボタンが複数ある場合は以下のようにdivのclassを「dialog dialog_ボタン名」としておくと、押されたボタンによって異なるダイアログを表示することができます。 <form method="post"> <input type="text"/> <input type="submit" value="登録する"/> <input type="submit" name="nosubmit" value="登録しない"/> <input type="submit" name="drink" value="お酒を飲む"/> <div class="dialog">登録します。よろしいですか？</div> <div class="dialog dialog_nosubmit">登録しません。よろしいですか？</div> <div class="dialog dialog_drink">5,000円になります。よろしいですか？</div> </form>
HTML全体のサンプル
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>確認用ダイアログ</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
</head>
<body>
<form method="post">
<input type="text"/>
<input type="submit" value="登録する"/>
<div class="dialog">ホントにいいですか？</div>
</form>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.confirm.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("form").confirm();
});
</script>
</html>
以下、いろいろと思ったこと。
onclickにonsubmitの処理を書くのはイヤだこういうsubmit前の確認メッセージを出すような処理は、おそらくサブミットボタンのonclickイベントで確認ダイアログを出して、「OK」が押されたらsubmitするように書くのがセオリーなのだと思います。私も昔からそうしてきました。 しかし最近になって「submit時の処理をonclickイベントに書くのは何だかイヤだなあー」と思うようになり、submitされた時の処理はonsubmitに書きたいという気持ちが強くなってきました。別にエンターキーでもスペースキーでも(何故か)onclickイベントは発生するので要件的には全く問題ないレベルなので、なんというか気持ちの問題というか「イヤだからイヤだ」みたいな、なんかそんな感じです。ハイ。 confirm()は時間を止めるけど他のはそうはいかないconfirm()関数とかalert()関数を呼び出してダイアログボックスを出すとJavaScriptの処理がそこでいったん停止します。そんでもってダイアログを消すと、停止したところから再び時が動き出すのでやっかいです。
$("form").submit(function(){
return confirm("ホントにいいんですか？");
});
confirm()関数だと↑こんな風に書けますが
$("form").submit(function(){
return $(".dialog").dialog("open");
});
JQuery-UI dialogで↑みたいに書いても時間が止まるわけではないので、ダイアログは表示されますがユーザーの入力を待つわけでもなくそのままsubmitされてしまいます。
onsubmitでダイアログを出して「OK」が押されたらsubmitonsubmitイベントで確認ダイアログを出し、ダイアログの中で「OK」が押されたらJavaScriptでsubmitイベントを発生させるわけですが、そうするとまたonsubmitイベントが反応して再びダイアログが表示されてしまいます。これはいけません。なんとかしないといけません。
Trackback URL for this post:http://blog.smartnetwork.co.jp/staff/trackback/28
|
|||
Fou
confirmを非表示にしたいボタンの制御について
<div class="dialog dialog_hoge">がなければ、非表示のままsubmitされるのかなと思いましたが、何もおこなわれませんでした。
また、こちらのライブラリはライセンスフリーですか？
ダイアログを出さずにsubmit
コメントありがとうございます！
ダイアログを出さずにsubmitする場合については考えていませんでした。
form要素のsubmitイベントに対してダイアログを出す関数を関連つけているので、イベントを無効にしてからsubmitすれば実現できると思います。
↓こんな感じでしょうか。テストしてないので間違ってたらごめんなさい。
<input type="button" class="without_confirm"/> ... $(":button.without_confirm").click(function(){ $(this).parents("form").unbind("submit").submit(); });ライセンスについては…特に何も考えてませんでした。保証もサポートもできませんが誰かに使ってもらえたら嬉しいです。
ご返信ありがとうございます
ライセンスの件、了解しました。
ありがたく利用させていただきます！
こちらの仕様上、submitボタンでないといけないという制約がありましたので、
js内をカスタマイズして利用させていただきたいと思います。
とりあえずダイアログメッセージがないものを対象外にするように修正してみました。
※あまりJavaScriptに強くないので、無理やり感はありますが。。。
【jquery.confirm.js(42行目あたり)】
$(this).submit(function(event){ if(! $.data(this, "confirmed") && $.data(form, "clicked_button")){ var submit = $.data(form, "clicked_button"); var dialog = $.data(submit, "dialog") || $.data(form, "dialog"); $(dialog).dialog("open"); event.preventDefault(); } }); $(this).find(":submit").click(function(){ if($.data(this, "dialog")){ $.data(form, "clicked_button", this); } });