読者です 読者をやめる 読者になる 読者になる

Railsのformで:remote => trueしてAjaxする

【書きかけかも】 Railsのformで、シンプルに画面遷移なくAjaxで登録・表示を行う方法。
さらにparticalを使ってすっきり。
他に正しいやり方があったらおしえて。

xxx.html.erb

重要なのは、form_tagに「:remote => ture」を追加すること。
RailsさんありがとうこれだけでAjax通信にしてくれる

<%= form_tag ({:controller => "コントローラー名",:action => 'yyy(Ajax通信をキャッチするアクション名)'}), :remote => true, :id => 'new_entry' do %>
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
<%= submit_tag '登録', :class => 'button on-right' %>

yyy - コントローラーでのキャッチ

コントローラーでAjax通信をキャッチするアクションを作成。
ここでメンバにした@eはあとでjs.erbやparticalテンプレートの中で使える!
さらに、renderを呼ぶことで、yyy.js.erbがレスポンスとして帰ってくるという、すばらしい仕様

def yyy
  @e = Entry.new(params[:entry]) # Entryモデルとして

  if @e.save
    render
  else
    render json: 'render error'
  end
end

yyy.js.erb

レスポンスを用いてhtml上の要素に登録内容を表示する。
なんとpartialだって使えちゃう
<%=j render 'yyy' %>によりparticalとして準備する_yyy.html.erbが使えるようになる
<%=j %>はエスケープ

$('#entry_list').prepend($("<%=j render 'yyy' %>").hide().fadeIn('slow'));

_yyy.html.erb - 要素レンダリング用partial

レンダリング用のpartialで、メンバ変数にした@eを用いて登録要素をレンダリング。すばらしい

<h1><%= @e.id %></h1>

規約は多いけど、理解するとかなり便利?