jq4rとjRails - hagino3000's blog

jQuery.jsをRailsアプリで使いたい！という人向けのプラグイン２つを試したのでメモ。

jq4r: http://code.google.com/p/jq4r/

jRails: http://ennerchi.com/projects/jrails

jRailsについて

現在の最新バージョン0.3を試す。
link_to_remote等、Railsのprototype_helperとメソッド名が同じで、オーバーライドしている感じ。
jsファイルの読みこみも標準の書き方と同じ次の１行でいけるのでprototype.js + script.aculo.usからの乗り換えでもコードの書き換えが必要無い様にしてある。

<%= javascript_include_tag :defaults %>

以下、嵌った点。動かないって言っているの俺だけだったらどうしよう、、、

visual_effectが動かない

RJSでvisual_effectを使ってみたのですが全く動作しません、、、、なんなんでしょう、結局jRails.rbに手を加えて動く様にしました。
生成されるjavascriptコードが公式サイトのVisual Effectsデモと全然違っています。

link_to_remoteの:submit オプションで生成されるコードが動かない

:submitオプションは、サーバへ送信したいフォーム部品の親要素を指定します。
jRails.rbを見るとgetパラメータを作る所のコードが次のようになっていますが、jQueryのserializeArray()は文字列ではなくJSON形式のデータを返すのでうまく動作しません。ここも改造して動くようにしました。

js_options['data'] = "$(\"##{options[:submit]}\").serializeArray()"

jq4rについて

2008/03/31時点のtrunkをcheckoutしたものを使用。
メソッド名は jquery_visual_effect みたいに頭に[jquery_]がついた形になっている。

以下、嵌った点。

rjsの結果を受け取る場合はコールバックの指定が必要

こんな感じにevaluate_remote_responseを指定しておかないと、rjsのレスポンスが実行されません。

<%= jquery_link_to_remote "<img src=\"../images/edit.png\" class=\"edit_ico\"/>",
  :url => {:action=>:edit, :id=>b.id},
  :before   => "funcCommon.startAjaxAnimation('#"+elemId+" .edit_ico')",
  :success  => "funcCommon.endAjaxAnimation('#"+elemId+"')",
  :complete => evaluate_remote_response,
  :failure  => "funcCommon.alertAjaxError()"
%>

逆にjRailsでこの書き方だとrjsのレスポンスが２回実行されるので注意。

jquery_link_to_remoteの:methodオプションが効かない

実装されていないっぽいです。常にGETになります。

jquery_link_to_remoteの:submitオプションが効かない

実装されていないっぽいです。

jquery_visual_effectはcallbackの指定が必須

こんな風に書いておかないと動かない模様。

html.jquery_visual_effect :fade_in, "対象id", {:function=>:success}

jq4r, jRails両方に言えること

メソッドのパラメータはDOM要素のidだったり、"#"+idを渡さないといけなかったり所によってまちまち。ただ、idだけをパラメータとして渡す箇所でも次のような文字列を渡してもＯＫです。

id + " .クラス名"
id + " > タグ名"

この辺はjQueryならではですね、範囲指定が柔軟にできて嬉しいですよ。

終わり

すごい間違えたことを書いている可能性があるので、気づいた事があればdisってください。