Ajaxによるボタン表示の切り替え

Ajaxを使えば、Webページからサーバーに非同期で、ページを移動することなくリクエストを送信することができる。

ビュー

remote: trueによってJavascriptによる変更が可能になる

<!-- フォローボタン -->
<%= form_with(model: ..., remote: true) do |f| %>
  ...
  <%= f.submit "Follow" %>
<% end %>

<!-- フォロー解除ボタン -->
<%= form_with(model: ..., html: { method: :delete }, remote: true) do |f| %>
  ...
  <%= f.submit "UnFollow" %>
<% end %>

コントローラ

respond_toでリクエストの種類によって応答を場合分けする。

class RelationshipsController < ApplicationController

  def create
    @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js       # デフォルトの挙動
    end
  end

  # destroyアクションも同様
end

JS-ERbファイル

Ajaxリクエストを受信した場合は、Railsが自動的にアクションと同じ名前を持つJavaScript用の埋め込みRuby（.js.erb）ファイル（create.js.erbやdestroy.js.erbなど）を呼び出す。
それらのファイルでDOMを操作するためのjQueryを書く。

// views/relationships/create.js.erb
$("#follow_form").html("<%= escape_javascript(render('フォロー解除ボタンのパーシャル')) %>");

escape_javascriptメソッドによりJavaScriptファイル内にHTMLを挿入するときに実行結果をエスケープする