RailsでAjaxを使う

RailsのセレクトボックスでAjaxを使いました。

もうハマらないようにメモです。

だいたいの仕組み

セレクトボックスから項目を選ぶ
jQueryでセレクトボックスの変化を検出
Ajaxリクエストを飛ばす
指定したhtmlを表示させる(jQueryとパーシャルによる)

コード

早速コードです。

$ rails new test_r
$ cd test_r
$ rails g controller ajax search result
$ rails g model Book title:string publish:string

新しいプロジェクトを作成してajaxコントローラーとBookモデルを作成します。

まずはajaxコントローラーの編集です。

#app/controllers/ajax_controller.rb
class AjaxController < ApplicationController
  def search
      @books=Book.select(:publish,:id).distinct
  end

  def result
      @books=Book.where(id:params[:id])
  end
end

次にviewの編集です。

※20150722form_forいらないので削除と、data内部を修正しました。

#app/views/ajax/search.html.erb
<%= select_tag(:id,options_from_collection_for_select(@books,:id,:publish),:id=>'publisher',
   data:{
        remote:true,
        url:url_for(action: :result)
        }
)%>

<ul id="result"></ul>

select_tagをremote:trueにできなくてかなりハマりました。

次にajax用のjsを書きます。app/views/ajax/result.js.erbを新規作成してください。

#app/views/ajax/result.js.erb
$(function(){
      $('#result').html("<%= escape_javascript(render 'search_result') %>");
    $('#publisher').change(function(){
    })
});

最初$('#result').htmlを$('#publisher').changeの中に書いていたのでうまくparams[:id]を取り出すことができなくて少しハマりました。<%= escape_javascript(render 'search_result') %>の部分でruby(rails)を埋め込んでいて、ビュー表示にパーシャルを用いています。

※このrender 'search_result'の部分にhtmlを直接書くこともできます。

次にパーシャルの編集です。app/views/ajax/_search_result.html.erbを新規作成してください。

# app/views/ajax/_search_result.html.erb
<% @books.each do |book|%>
    <li><%= link_to book.title, 'http://google.com' %></li>
<% end %>

link_toに意味はありません。参考にした本そのまんまです。

※追記20150722ルーティングを追加しなければいけないので追記です。
config/routes.rbに以下を追加してください

#config/routes.rb
post '/ajax/result'

これで完成です。

実際に表示してみるとこんな感じになります。

セレクトボックスのchange時のリクエストパラメーターはこんな感じです。

※20150722変なパラメーター乗ってたので修正

これを応用して連動プルダウンを作ろうと思います。

※20150723追記、書きました。hyottokoaloha.hatenablog.com

この本を参考に書いてます。

Ruby on Rails 4 アプリケーションプログラミング

バージョン

$ ruby -v
ruby 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin14.0]

$ rails -v
Rails 4.2.3