FORM の登録確認のダイアログ表示に jQuery Alert Dialogs を使う方法

jQuery Ex Alert Dialogs の更新履歴

2011-06-07: Ver 0.1.2
各種パラメータの指定、API オブジェクトの取得をできるようにしました。

毎度ながら地味なネタですが、FORM 要素で登録確認のダイアログを表示する際、jQuery Alert Dialogs で代替えする方法について書いてみたいと思います。ちなみに jQuery Alert Dialogs とは、独自デザインなダイアログを表示してくれる jQuery プラグインです。

alert等のウィンドウ内ダイアログを実現するjQueryプラグイン「jQuery Alert Dialogs」- PHPSPOT

confirm 関数で登録確認ダイアログを表示する

FORM の SUBMIT ボタンクリック時に、登録確認のダイアログを表示させる場合、通常以下のような書き方で confirm 関数を使用するかと思います。

$('input.entryBtn').click(function(){
    return confirm('登録しますか？');
});

confirm 関数により、サブミット前にユーザの　OK、CANCEL の入力待ち状態となり、OK を選択すれば true が返りそのままサブミットされ、CANCEL なら false となりサブミットもキャンセルされるという処理になります。

Demo

confirm 関数の代わりに jQuery Alert Dialogs を使用する

jQuery Alert Dialogs で、同じように SUBMIT 前に登録確認のダイアログを表示しようとした場合、以下のように少し工夫した書き方が必要になります。

var confirmOk = false;
$('input.send').click(function(){
    var button = $(this);
    if (confirmOk || jConfirm('登録しますか？', '登録確認',function(isOk){
        if (isOk) {
            confirmOk = true

            //再クリック
            button.click();
        }
    }));
    //１度目はfalse、ダイアログではいを選んだ場合は、再度、起動され true となる
    return confirmOk;
});

jQuery Alert Dialogs の場合では、confirm 関数のようにユーザの入力処理を待ってくれないので、一旦、SUBMIT 処理をキャンセルした後、jConfirm 関数でダイアログを表示し、OK を選択した時のみ、サブミット処理を起動するようにする必要があります。この時、サーバサイドで何のボタンによりサブミットされたかを判別できるよう、対象ボタンの CLICK イベントでサブミットさせる必要があります。

Demo

プラグイン化してみる

単純な処理ですが、毎回書くのも面倒なのでプラグイン化してみました。オリジナルのソースは変更せず設定値やイベント等の上書きをしています。下記点がオリジナルと異なります。（jAlert、jPrompt 関数にも適用されます）

オーバーレイの背景色を #555、透過度を 0.5 にしています
OK、CANCEL ボタンの表示をはい、いいえにしています
ダイアログボタンに exButton（CSS1 のみで質感のあるボタンを表現してみる - Cyokodog::Dialy）が適用されます
CANCEL ボタンにフォーカスした状態で、エンターキーを押した時、callback 関数の引数に ture が渡されてしまう不具合(？)っぽい動きを解消してます（falseが渡されます）
入力フィールドにフォーカスした状態での、エンターキーによる自動サブミットを抑止します

使い方

jquery.js、jquery.alerts.css、jquery.alerts.js、jquery.exalertdialogs.js を読み込みます。（exButton を適用する場合は exbutton.css も読み込みます）

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript" src="jquery.exalertdialogs.js"></script>

適用したいサブミットボタンに対し、exJConfirm() メソッドを実行します。

$('input.send').exJConfirm(
    '登録しますか？',   //メッセージ
    '登録確認'          //ダイアログの見出し
);

Demo

登録確認ダイアログ表示前に入力チェックを行う

~~第３引数にコールバック関数を指定することで、~~preCallback パラメータに、ダイアログ表示前の処理を記述することができます。コールバック関数の返却値を false にすることで、登録確認ダイアログの表示を抑止できます。以下記述では登録処理前に各項目の必須入力チェック（$.fn.requirdCheck）を行い、エラーのあった項目に error クラスを割り当てた後、カーソルをフォーカスさせてます。

//必須入力チェック
$.fn.requirdCheck = function(name){
    var target = this;
    if (!target.val().length) {
        target.addClass('error');
        jAlert(name + 'が入力されてません','入力エラー',function(){
            target.focus();
        });
        return false;
    }
    return true;
}
$('input.send').exJConfirm(
    '登録しますか？',
    '登録確認',{
        preCallback : function(){
            $($('input.send').attr('form')).find('.error').removeClass('error')
            return  $('input.name').requirdCheck('Name') &&
                    $('input.url').requirdCheck('URL') && 
                    $('textarea.comment').requirdCheck('Comment');
        }
    }
);

Demo

（基本的に使用しないかと思いますが）第４引数にコールバック関数を指定した場合は、登録確認ダイアログではいかいいえを選択した後の処理として実行されます。ダイアログ表示前コールバック関数と同様に、返却値を false にすることでサブミットをキャンセルすることができます。

パラメータ

api: 初期値：false
true にすると api オブジェクトを返します。
disabled: 初期値：false
true にすると確認ダイアログを表示しません。
preCallback: 初期値：function(){}
ダイアログ表示前のコールバック関数を記述できます。
返却値を false（return false）とするとダイアログを非表示にできます。
callback: 初期値：function(){}
ダイアログで「はい」を選択した場合のコールバック関数を記述できます。
返却値を false（return false）とすることで、後続のイベントをキャンセルできます。