jQueryで link_to_remoteを使う

Rails Tips JavaScript

特に強い動機があったわけじゃないんですが、Extended-Bort をベースにした Railsで開発を始めてしまったので、必然的に prototype.js じゃなくて jQuery.jsに移行することになりました。
で、prototype.js環境のものをポツポツと移行していったんですが、link_to_remoteで詰まってしまったので、その対処法をメモしておきます。

jRails

jQueryで Ajax関係(link_to_remoteなど)を扱うためには、http://ennerchi.com/projects/jrailsが必要です。
Extended-Bort には http://ennerchi.com/projects/jrails が含まれていないので、まずこれを RAILS_ROOTにインストールします。

ruby script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

これで vendor/plugins/jrailsと public/javascriptsに必要なファイルがコピーされます。

 <%= javascript_include_tag 'jquery', 'jquery.livequery', 'jquery-ui', 'jrails' %>

jquery-ui.js はエフェクト関係だと思うので、Ajaxだけだったらたぶんいらないと思いますが、あとで使うかもしれないので入れておきました。
これで、基本的な Ajax関係のヘルパが使えるようになります。

link_to_remote

ただリンクボタンをクリックして Ajaxでサーバとやり取りするようなケースはこれで問題ないのですが、入力フィールドに入れられた値を持って Ajaxで通信するやり方は少し工夫が必要です。

 <%= f.text_field :code, '会員ID' %>
 <%= link_to_remote('<span>ID確認</span>',
       { :update => 'status', 
         :url  => { :controller => 'users', :action => 'check' }, 
         :with => "'code=' + $('#user_code').attr('value')"
       },:href => "/check/", :class => 'button' ) %>
 <span id='status'>&nbsp;&nbsp;</span>

ここ( :with => "'code=' + $('#user_code').attr('value')" )がキモでしょうか。HTMLに展開されるとこう(↓)なります。

 <input id="user_code" name="user[code]" type="text" />
 <a class="button" href="/check/" onclick="$.ajax({data:'code=' + $('#user_code').attr('value') +
   '&amp;authenticity_token=' + encodeURIComponent('213b5ab3d231d1f70e3235274f10f409167a6db3'),
   success:function(request){$('#status').html(request);}, type:'post', url:'/check'}); return false;">
 <span>ID確認</span></a>
 <span id='status'>&nbsp;&nbsp;</span>

:withでパラメータを渡すということと、$('#id').attr('value') で入力フィールドの値をとる(prototype.jsだと $F()関数)ところがよくわからず少し手こずりました。
あと、:hrefを指定しないと :href='#' になってしまうので、ちゃんと指定した方がユーザに優しいです。

参考