人気ブログランキング | 話題のタグを見る

新規ドキュメント


忘れていく脳のための備忘録
by w_l_s

あの素晴らしいイベントをもう一度

最近は会社が忙しくてずっとほったらかしだった…。
毎週残業で、帰って寝て起きて会社へ、という毎日だった。

今日は珍しく早く帰れたので、会社でやったことでも書いてみよう。

今、会社ではjQueryを使っている。
Ajax通信したり、折りたたんだり、フォームを出したり消したり…。

そんななか、こんなことを言われた。

「送信ボタンを連打すると、何度でもサーバに送信するからやめさせて」

そりゃね、$.click()で送信イベント起こしてるから、押せば何回でも送信されるよね。
じゃあどうしようか。
$.one()を使えば一回だけイベントを起こせるけど、
フォームの入力が正しくないときは入力を直してもらってからもう一度送信しなおすし、
サーバからエラーが帰ってきたらやっぱり直してもらってから再送信しないといけない。
サーバに正しく処理されたらもうこのイベントは起さなくていい。

ようは、入力がだめだったら、もう一度同じイベントを設定しなおして、
サーバ側にわたって正しく処理されたらイベントを終了すればいいわけだ。

$.ajax()を見てみると、4つのコールバック関数がある。
beforeSend : 送信前の処理
complete : 送信後の共通した処理
success : 送信して成功だったときの処理
error : 送信して失敗だったときの処理

こいつらと$.one()を使って、成功するまでイベントを再設定すればいいんじゃないだろうか。
beforeSend とerror のコールバック関数で、同じイベントを再度設定してやればうまくいきそうだ。

てなわけで、失敗したら自分自身を呼び出してイベントを設定する関数を書いてみました。
会社で書いたものはさすがに出せないけど、骨組みだけでも載せてみる。

ちなみに "..." の部分は好きな処理や引数を書いて、自分好みの関数に仕立ててください。
function ajax_communication_event(button_id, form, url, 
    request_type, data_type, ..., validator_function){
$(button_id).one("click", function(){
$.ajax({
url: url,
type: request_type,
data: $(form).serialize(),
dataType: data_type,

beforeSend: function(){
...
boolean = validator_function();
if(boolean){
ajax_communication_event(
button_id,
form,
url,
request_type,
data_type,
...,
validator_function
);
}
return boolean;
},
complete: function(){
...;
},
success: function(){
...;
},
error: function(){
...
ajax_communication_event(
button_id,
form,
url,
request_type,
data_type,
...,
validator_function
);
},
});
});
}


長ったらしいけど、重要なことはbeforeSend と error のコールバック関数で自分自身を呼び出して同じイベントを設定するということ。
再帰処理を使えば意外と簡単に実装できるものだった。
by w_l_s | 2009-04-13 23:42 | jQuery