質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

353閲覧

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

hajsu00

総合スコア151

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2022/06/16 00:19

編集2022/06/19 20:11

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

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

起きている問題

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

前提

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

関連コード

ボタン表示の親玉

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

ruby

1<div id="join_leave_button"> 2 <% if @current_group.users.include?(current_user) %> 3 <%= render 'groups/leave' %> 4 <% else %> 5 <%= render 'groups/join' %> 6 <% end %> 7</div>

参加ボタン

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

erb

1<%= form_with(model: current_user.group_users.build, local: false) do |f| %> 2 <%= hidden_field_tag :group_id, params[:id] %> 3 <%= 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" %> 4<% end %>

退会ボタン

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

erb

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 %>

「グループへ参加」押下時の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

1class GroupUsersController < ApplicationController 2 before_action :logged_in_user 3 4 def create 5 @current_group = Group.find(params[:group_id]) 6 @current_group.join(current_user) 7 respond_to do |format| 8 format.html { request.referer || root_url } 9 format.js 10 end 11 end 12... 13 14end

確認したこと

binding.pry実行結果

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

bash

1From: /var/www/myapp/app/views/groups/_leave.html.erb:4 #<Class:0x00007f7765456da0>#_app_views_groups__leave_html_erb__3503282714866467573_44620: 2 3 1: <% binding.pry %> 4 2: <%= form_with(model: current_user.group_users.find_by(group_id: params[:id]), html: { method: :delete }, local: false) do |f| %> 5 3: <% binding.pry %> 6 => 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" %> 7 5: <% end %>

development.log

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

bash

1Started POST "/group_users" for 172.23.0.1 at 2022-06-16 08:46:55 +0900 2Processing by GroupUsersController#create as JS 3 Parameters: {"authenticity_token"=>"[FILTERED]", "group_id"=>"1", "commit"=>"グループに参加"} 4 User Load (0.8ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 51 ORDER BY `users`.`id` ASC LIMIT 1 5 ↳ app/controllers/application_controller.rb:19:in `logged_in_user' 6 Group Load (0.8ms) SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1 7 ↳ app/controllers/group_users_controller.rb:5:in `create' 8 TRANSACTION (0.6ms) BEGIN 9 ↳ app/models/group.rb:12:in `join' 10 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') 11 ↳ app/models/group.rb:12:in `join' 12 TRANSACTION (4.3ms) COMMIT 13 ↳ app/models/group.rb:12:in `join' 14 Rendering group_users/create.js.erb 15 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 16 ↳ app/views/groups/_leave.html.erb:2 17 Rendered groups/_leave.html.erb (Duration: 25505.1ms | Allocations: 50987) 18 Rendered group_users/create.js.erb (Duration: 25514.5ms | Allocations: 51359) 19Completed 200 OK in 25554ms (Views: 25523.7ms | ActiveRecord: 8.9ms | Allocations: 57614)

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ohoh5454

2022/06/19 10:07

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

2022/06/19 10:48

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

回答1

0

自己解決

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

'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が重複してうまく動かなかった様です。

投稿2022/06/19 11:11

hajsu00

総合スコア151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問