[rails]素のJavaScriptで実装したAjaxで、グループへの「参加」ボタンを押しても「退会」に切り替わらない問題を解決したい。

Question

転職用のポートフォリオを作成中です。
グループ機能の「グループへの参加」「グループから退会」ボタンを素のJavaScriptでAjax化しようとしたところ、ボタンを押下しても変化がないという現象に遭遇しました。

お力を貸していただけると幸いです。

起きている問題

グループへの参加」ボタンを押しても、ボタン部分の表示が「グループから退会」へ切り替わりません。

前提

• グループへの参加ボタンとと退会ボタンの両方で同じ現象が起きていますが、本件では参加ボタンにのみ言及します。
• グループ詳細画面から「グループへの参加」ボタンをクリックすると、データベース上ではグループへの参加が成功する。
• ボタン押下後に画面を更新すると、意図した通りボタンの表示が更新される

関連コード

ボタン表示の親玉

src/app/views/groups/_join_leave_button.html.erb

<div id="join_leave_button">
  <% if @current_group.users.include?(current_user) %>
    <%= render 'groups/leave' %>
  <% else %>
    <%= render 'groups/join' %>
  <% end %>
</div>

参加ボタン

src/app/views/groups/_leave.html.erb

<%= form_with(model: current_user.group_users.build, local: false) do |f| %>
  <%= hidden_field_tag :group_id, params[:id] %>
  <%= f.submit "グループに参加", class: "cursor-pointer bg-indigo-700 hover:bg-indigo-600 active:bg-indigo-500 text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
<% end %>

退会ボタン

src/app/views/groups/_leave.html.erb

<% binding.pry %>
<%= form_with(model: current_user.group_users.find_by(group_id: params[:id]), html: { method: :delete }, local: false) do |f| %>
  <% binding.pry %>
  <%= f.submit "グループを退会", class: "cursor-pointer bg-white active:bg-indigo-600 text-indigo-600 font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded border-solid border-2 border-indigo-600 sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
<% end %>

「グループへ参加」押下時のJavaScript

src/app/views/group_users/create.js.erb

'use strict'

{
  document.getElementById('join_leave_button').addEventListener('click', () => {
    const join_leave_button = document.getElementById('join_leave_button')
    join_leave_button.innerHTML = "<%= escape_javascript(render('groups/leave')) %>"
  });
}

コントローラー

class GroupUsersController < ApplicationController
  before_action :logged_in_user

  def create
    @current_group = Group.find(params[:group_id])
    @current_group.join(current_user)
    respond_to do |format|
      format.html { request.referer || root_url }
      format.js
    end
  end
...

end

確認したこと

binding.pry実行結果

参加ボタン押下後、退会ボタンsrc/app/views/groups/_leave.html.erbまで処理が通っている。

From: /var/www/myapp/app/views/groups/_leave.html.erb:4 #<Class:0x00007f7765456da0>#_app_views_groups__leave_html_erb__3503282714866467573_44620:

    1: <% binding.pry %>
    2: <%= form_with(model: current_user.group_users.find_by(group_id: params[:id]), html: { method: :delete }, local: false) do |f| %>
    3:   <% binding.pry %>
 => 4:   <%= f.submit "グループを退会", class: "cursor-pointer bg-white active:bg-indigo-600 text-indigo-600 font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded border-solid border-2 border-indigo-600 sm:mr-2 mb-1 ease-linear transition-all duration-150" %>
    5: <% end %>

development.log

ログを見ても、create.js.erbの後に_leave.html.erbが実行されている。

Started POST "/group_users" for 172.23.0.1 at 2022-06-16 08:46:55 +0900
Processing by GroupUsersController#create as JS
  Parameters: {"authenticity_token"=>"[FILTERED]", "group_id"=>"1", "commit"=>"グループに参加"}
  User Load (0.8ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` = 51 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/application_controller.rb:19:in `logged_in_user'
  Group Load (0.8ms)  SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1
  ↳ app/controllers/group_users_controller.rb:5:in `create'
  TRANSACTION (0.6ms)  BEGIN
  ↳ app/models/group.rb:12:in `join'
  GroupUser Create (1.1ms)  INSERT INTO `group_users` (`group_id`, `user_id`, `created_at`, `updated_at`) VALUES (1, 51, '2022-06-16 08:46:55.677313', '2022-06-16 08:46:55.677313')
  ↳ app/models/group.rb:12:in `join'
  TRANSACTION (4.3ms)  COMMIT
  ↳ app/models/group.rb:12:in `join'
  Rendering group_users/create.js.erb
  GroupUser Load (1.3ms)  SELECT `group_users`.* FROM `group_users` WHERE `group_users`.`user_id` = 51 AND `group_users`.`group_id` IS NULL LIMIT 1
  ↳ app/views/groups/_leave.html.erb:2
  Rendered groups/_leave.html.erb (Duration: 25505.1ms | Allocations: 50987)
  Rendered group_users/create.js.erb (Duration: 25514.5ms | Allocations: 51359)
Completed 200 OK in 25554ms (Views: 25523.7ms | ActiveRecord: 8.9ms | Allocations: 57614)

---

原因がわからずに長時間解決できずにいます。
よろしくお願いいたします。

Comments

[kai]

クリックイベントの中の1行目に`console.log 'aaaaaaa'`を追加してボタンを押した時にjsが反応しているか検証してみてください。

[hajsu00]

ありがとうございます。
クリックイベントの外では文字列が表示されましたが、中では反応していませんでした。
クリックイベント自体が動いていないと考えられます。
railsのログばかり確認していて気がつきませんでした。

Answer 1

以下の様に修正したところ、正常に動作しました。

誤

'use strict'

{
  document.getElementById('join_leave_button').addEventListener('click', () => {
    const join_leave_button = document.getElementById('join_leave_button')
    join_leave_button.innerHTML = "<%= escape_javascript(render('groups/leave')) %>"
  });
}

正

'use strict'

{
  const join_leave_button = document.getElementById('join_leave_button')
  join_leave_button.innerHTML = "<%= escape_javascript(render('groups/leave')) %>"
}

上段は、素のHTML+Javascriptの書き方でした。
クリックイベント自体はRailsが担当していたため、addEventListenerが重複してうまく動かなかった様です。