observe_fieldはPrototypeなのでRails3では標準でサポートしない

Rails3

Ruby on Railsで大好きな機能の一つだったのに使えなくなっていた。悲しい。
　

これは解決しなかった

泣いていては解決しなのでUnobtrusive JavaScript in Rails 3を参照する

Rails2のころ

<%= text_field_tag :search %>
<%= observe_field :search, :url => live_search_path, :update => :results %>

Rails3はjQueryで何とかする

// Append the function to the "document ready" chain
jQuery(function($) {
  // when the #search field changes
  $("#search").change(function() {
    // make a POST call and replace the content
    $.post(<%= live_search_path %>, function(data) {
      $("#results").html(data);
    });
  });
})
  • ページ読み込み時に実行
  • id="search"が変わった
  • 値をコントローラーのlive_search_pathにぶん投げて
  • 帰ってきたdataをid="result"にブチ込む

日本語化すると実に簡単に思えてくるから不思議だ。
　
まったく動かないので検索して数時間が経つけど改善しないな、、般若心経を書いているような結果しか見つけられない。
　

こっちは解決できた

こんなのを見つけた。
jQueryでobserve_field的なことを。
これを参考にして作る。

app/views/hoge/new.html.erb

<%= f.autocomplete_field :member_name, autocomplete_member_member_name_requests_path, :id_element=>'#hoge_member_id' -%>
<%= f.hidden_field :member_id -%>

オートコンプリートも使っている。

app/assets/javascripts/application.js

$(document).ready(function(){
  $("#hoge_member_name").change(function(){
     var member_id = $("#hoge_member_id").val();
     $.get("live_search_member?member_id=" + member_id);
  });
});

jQueryでイベントを監視している。changeの他にblurとかfocusとか使い分けるといいかな？


app/controllers/hoge_controller.rb

def live_search_member
  @hoges = Hoge.where("member_id = ?", params[:member_id])
  render
end

name（文字列）じゃなくてid（数値）で検索している。なんとなく早そうだし。

app/views/hoge/live_search_member.js.erb

$("#member_results").html("<%= escape_javascript(render :partial=>'live_member', :member_id=>params[:member_id])%>");

javascriptでerbなファイルはescape_javascriptを使って式展開する。

app/views/hoge/_live_member.html.erb

<p>hoge</p>

「render :partial=>'live_member'」なのでファイル名の先頭に「_
」をつけること。