☀️

【RailsとBootstrap】フォーム提出時に確認モーダルを出す

2023/06/17に公開

Bootstrap

ポートフォリオにタイトル通りの機能を実装しました。
（ポートフォリオ「飲食店共有ルーム」：　https://restaurants-we-know.herokuapp.com/　）
学習の一環として一連の作業を記していきます。

前提

ruby (2.7.1)
rails (6.0.6)
bootstrap(4.5.0)

【課題】

フォーム提出時に確認モーダルを出すこと
- 実装方法：　bootstrapを使う
モーダルにDBから取得したデータを表示すること
- 実装方法：　js.erbを使って非同期で行う

【該当の画面】

メンバー申請画面
「部屋」のトークン（'Yiw84hBK'のようなランダムな文字列）を入力して送信することで、その「部屋」のメンバー申請を行う
（そのトークンは事前に知人から共有されている前提）

【アプリの挙動】

token入力・送信 →サーバーでバリデーション
- バリデーションNG時：バリデーション表示
- OK時：そのまま画面遷移して申請完了
［変更点］
- OK時：モーダルで部屋名と部屋オーナーを表示し、OKorNOを選択 →OKクリックで申請完了

（画面のスクショのビフォーアフターを一番下のパートに載せています！）

実装

手順

ルーティングを作成
コントローラにモーダル表示用のアクションを作成
viewにモーダルを作成

ルーティングを作成

routes.rb

resources :member_requests, only: [:new, :create, :destroy] do
+  collection do
+    post :check
+  end
(略)
end

コントローラにモーダル表示用のcheckアクションを作成

app/controllers/member_requests_controller.rb

(略)

def check
    if params[:room_token].blank?
      redirect_to new_member_request_path, notice: 'idが入力されていません' 
    else
      if current_user.request_allowed == true
        get_user
        @room = Room.find_by(token: params[:room_token])
        if @room.nil?
          redirect_to new_member_request_path, notice: 'idが間違っています'
        else
          @room_token = params[:room_token]
          @room_founder = User.find(@room.room_founder.founder_id)
        end
      end
    end
  end
end

viewでフォームのオプションを変更・モーダルを作成

app/views/member_requests/new.html.erb

-   <%= form_with url: member_requests_path, local: true do %>
+   <%= form_with url: check_member_requests_path, remote: true do %>
(略)
+ <div class="modal fade" id="confirm_modal" tabindex="-1" aria-hidden="true"></div>

form_withからlocal: trueを消すことで、非同期通信が行われるようになります。
（rails6.0では、form_withはデフォルトで非同期通信となる。そのため本来は上記の追加コードのremote: trueは不要。あっても動くよ）

また、モーダルの一番外のdiv要素をここで追加しています。
後からjs.erbでこの中にモーダルの中身を追加します。

参考：　Bootstarap4.5　モーダル

app/views/member_requests/check.js.erb

$('#confirm_modal')
  .html('<%= j(render('confirm_modal')) %>')
  .modal('show');

app/views/member_requests/_confirm_modal.html.erb

 <div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">申請先はこちらでよろしいですか？</h5>
      <button class="close" data-dismiss="modal">ｘ</button>
    </div>
    <div class="modal-body">
      <span class="modal-inline-text">部屋名： <%= @room.name %></span><br>
      <span class="modal-inline-text">オーナー：  <%= @room_founder.name %></span>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn m-0" data-dismiss="modal">
        キャンセル
      </button>
      <%= link_to "申請する", member_requests_path(room_token: @room_token), method: :post, class: "btn btn-success" %>
    </div>
  </div>
 </div>