ページ

2015年4月11日土曜日

GAEと戯れる 22 - jQuery UI 確認ダイアログ -

jQuery UIを使用した確認ダイアログを作ってみる。

・概要















×を押した時に削除してもいいかの確認ダイアログを表示。
OKの場合実際の削除処理を行う。

まずは表示用のdivタグを作成。





















どの画面からでも呼べるように共通JSPに記述。
次にダイアログの表示をjQueryを使って作成

 * 確認ダイアログ
 * 
 * @param msg ダイアログ本文
 * @param callback OK時の処理
 */
function showConfirmDialog(msg, callback) {
$('#confirm_dialog').html(msg);
$('#confirm_dialog').dialog({
modal: true,
title: "確認",
buttons: {
"OK": function() {
callback();
$(this).dialog("close");
},
"CANCEL": function() {
$(this).dialog("close");
}
}
});

}

JSPに追加したdivタグにメッセージ文字列を追加。
ボタンとして「OK」、「CANCEL」を用意
OKがおされた場合、引数で指定されたコールバックを実行する。

・メソッド使用箇所
 <a href="#" onclick="showConfirmDialog('削除してもよろしいですか?’, 
     function() {
        doPost(document.list_form, '/settings/memberList', 'id', ${member.key.id}, 'delete’);
     });” >
    <img src="/res/delete_off.png" alt="削除" border=0 width=20 height=20>

 </a>

コールバックとしてPOST処理を行う。


↓実行イメージ

















0 件のコメント:

コメントを投稿