prototype.js * YouTuber.jsp(Ajax)
YouTuber.jspのAjaxバージョンdevelopment版をローンチ。
YouTuber.jsp beta
■[next]や[prev]を表示
色々と調べていて、検索結果に続きがあるとき[next]や[prev]を表示する所謂ページングを実装しようとしてなかなかうまくいかなかったが、表示アルゴリズムをJava側で処理させたらできた。
具体的には、単純に[List#size()が100を返すときだけ表示]そうじゃないときは表示しない、とかにしてdivを吐かせれば簡単に実装できた。
■
jspオンリーバージョンだとsetTimeoutでパラパラと３枚の画像を入れ替えていたが、Ajax版だとに如何にして埋め込もうか思案中。JSPもう一個つくってそいつに吐かせればいい気もするが、処理が２倍かかる気がしてならない。。
■ラジオボタンの値を取得する。
prototype自身は単発でラジオボタンの値を取得するメソッドは持ち合わせていないらしい。
なのでラジオボタンの選択肢によってリアクションを変えたい場合、以下のようにコーディングするとラジオボタンの値を取得できる。
var option = Form.serialize($('optionform')).toQueryParams()['options'];
id名optionformのフォームに含まれるものを全て一旦クエリの形式に変形して、その中からoptionsという引数で渡されるものものだけを取り出している。
■Now Loading...の表示の仕方。
prototypeでは、Ajax.Requestする際にイベントを引数に取ると、特定イベントにメソッドを割り当てる事ができる。
なので、now Loading...やローディング画像を表示したい時には、
new Ajax.Request('target.jsp',
{
method: 'get',
parameters: params,
onLoading: showLoading,
onComplete: getResponse
});
このように明示的にonLoadingイベントでshowLoadingというメソッドが呼ばれるようにする。
showLoadingメソッドはこのように設定。
function showLoading() {
Element.hide('thumbnails');
Element.show('loading');
}
prototypeのElementクラスのshow / hideメソッドを用いる事で、簡単に指定したid(ここではthumbnailsというdiv)の表示・非表示を切り替えられる。今回はloading というdivにloading.gifを配置して初期化の際にhide、そしてonLoadingでshowすることでデータのロード中はローディング画像を表示するようにした。