部分テンプレートを使って、ajax処理を記述する

例えば、「求人」作成の際に「事業所」検索して関連付ける。とか、やりたいときにcoffeescriptをガリガリ書かなくても実現出来たのでやり方をメモ。

登場人物

• form_tag
• business_controller.rb (app/controllers/business_controller.rb)
• search.js.erb (search.js.erb) (app/views/business/search.js.erb)
• _search_res.html.haml (app/views/business/_search_res.html.haml)

form_tag(url_for_options = {}, options = {}, &block)

ajax呼出を行うために、remote:true の記載が重要
このdivセクションにajaxで取得した結果を突っ込みます

<%= form_tag({controller:'business',action:'search'}, remote:true) do %>
<%= text_field_tag 'search-field' %>
<%= submit_tag "検索" %>
<div id='search_list'></div>

ちなみに、

<%= form_tag {controller:'business',action:'search'}, remote:true do %>

だと、エラーになります。

<%= form_tag url_for(controller:'business',action:'search'), remote:true do %>

と書くか

<%= form_tag url_for_options={controller: 'business', action: 'search'}, remote:true do %>

と書けばOK

business_controller.rb

普通にsearchロジックを書きます。
下だけでも、ajaxの結果として、次のsearch.js.erbが実行されます

def search
        @businesses = Business.all
        @msg = 'Search done!'
end

search.js.erb

hamlで記載するよりも、erbで書くのがここではわかりやすいかなと。

$('#search_list').html('<%= j render 'search_res' %>')

としておくと、remote:trueのsubmitにより、jsが呼び出されて、このrenderが展開されることで、<div id="search_list"></div> の中身に部分テンプレート _search_res.html.erb が展開できます。

_search_res.html.haml

最初のform_tagにこれが埋め込まれる感じ。
当然のごとく、@business, @msg 変数は business_controller.rb のsearch メソッドで代入されたインスタンス変数です。

.row
    .col-12
        = "#{@businesses.size}件 :"
        = @msg
- # 以下省略・・