転職用のポートフォリオを作成中です。
グループ機能の「グループへの参加」「グループから退会」ボタンを素のJavaScriptでAjax化しようとしたところ、ボタンを押下しても変化がないという現象に遭遇しました。
お力を貸していただけると幸いです。
起きている問題
グループへの参加」ボタンを押しても、ボタン部分の表示が「グループから退会」へ切り替わりません。
前提
- グループへの参加ボタンとと退会ボタンの両方で同じ現象が起きていますが、本件では参加ボタンにのみ言及します。
- グループ詳細画面から「グループへの参加」ボタンをクリックすると、データベース上ではグループへの参加が成功する。
- ボタン押下後に画面を更新すると、意図した通りボタンの表示が更新される
関連コード
ボタン表示の親玉
src/app/views/groups/_join_leave_button.html.erb
ruby
<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
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
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')) %>" }); }
コントローラー
ruby
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
まで処理が通っている。
bash
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
が実行されている。
bash
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"=>"グループに参加"} [1m[36mUser Load (0.8ms)[0m [1m[34mSELECT `users`.* FROM `users` WHERE `users`.`id` = 51 ORDER BY `users`.`id` ASC LIMIT 1[0m ↳ app/controllers/application_controller.rb:19:in `logged_in_user' [1m[36mGroup Load (0.8ms)[0m [1m[34mSELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1[0m ↳ app/controllers/group_users_controller.rb:5:in `create' [1m[36mTRANSACTION (0.6ms)[0m [1m[35mBEGIN[0m ↳ app/models/group.rb:12:in `join' [1m[36mGroupUser Create (1.1ms)[0m [1m[32mINSERT 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')[0m ↳ app/models/group.rb:12:in `join' [1m[36mTRANSACTION (4.3ms)[0m [1m[35mCOMMIT[0m ↳ app/models/group.rb:12:in `join' Rendering group_users/create.js.erb [1m[36mGroupUser Load (1.3ms)[0m [1m[34mSELECT `group_users`.* FROM `group_users` WHERE `group_users`.`user_id` = 51 AND `group_users`.`group_id` IS NULL LIMIT 1[0m ↳ 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)
原因がわからずに長時間解決できずにいます。
よろしくお願いいたします。
まだ回答がついていません
会員登録して回答してみよう