RailsにおけるAjax通信（アクション名.js.erb にflashメッセージとインスタンス変数を渡す）

RailsにおいてAjax（非同期）通信を有効化した際は、通常のビューファイルではなくviewsディレクトリ配下のアクション名.js.erbというファイルに書かれた内容がレンダリングされます。

※ この.js.erbファイルは自動作成されないので、touch app/views/コントローラ名/アクション名.js.erbコマンド等で作成する必要があります。）

そのファイルによるレンダリングの際に、
「createやdestroyアクションにおける処理が反映されたインスタンス変数や、flashメッセージを表示したい！」と思うことが多くあると思います。

自分の備忘録を兼ねて下記します。

コントローラファイル

authorized_maps_controller.rb

class AuthorizedMapsController < ApplicationController

~ 略 ~

# 下記①②を、create.js.erbで利用します
# ① インスタンス変数 [@authorized_users] 
#  使用するために必要なこと ⇨ 特になし。createアクション内で定義されていれば利用可能

# ② flashメッセージ [flash[:notice] = "ユーザー：#{@authorized_user.email} を追加しました。"]
#  使用するために必要なこと ⇨ format.jsのブロック内に書く必要があります。

  def create
    @authorized_users = @map.authorized_users
    if @authorized_user = User.find_by(authorized_params)
      @map.authorizing_user(@authorized_user)

      respond_to do |format|
        # format.jsとして、flashメッセージはブロック内に記述します 
        format.js { flash[:notice] = "ユーザー：#{@authorized_user.email} を追加しました。" } 
      end

    else
      flash[:notice] = "招待できないメールアドレスです"
      render 'new'
    end
  end

上記コントローラで定義したインスタンス変数@authorized_usersと、flash[:notice]を利用します。

アクション名.js.erbファイル

create.js.erb

// htmlメソッドに渡すHTML(ERB)構成を、文字列として変数users_listに格納
// この文字列はそのままERBとして読まれるので、インスタンス変数やヘルパーメソッドをそのまま書ける
users_list = '\
      <% @authorized_users.each do |user| %>\
        <% if current_user == user %>\
          <li><%= "#{user.email}（所有者）" %></li>\
        <% else %>\
          <li><%= user.email %></li>\
        <% end %>\
      <% end %>\
    ';

<% flash.each do |type, message| %>
　// Bootstrapを導入しているため、`class="alert alert-success"`としています
  $("#added-message").html('<p class="alert alert-success"><%= type %><%= message %></p>')
  $("#result").html(users_list)
<% end %>

正しく記述されていれば、formを送信したタイミングで画面が更新されます。

上記内容を実施する前に

利用中のformヘルパーにてremote: trueが有効化されていることを確認の上、ご実施ください。
下記のうちチェックが入っているものは、デフォルトでremote: trueが有効になっています。

• form_with
• form_for
• form_tag