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処理を行う。


↓実行イメージ