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

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

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

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

JavaScript

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

Ajax

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

解決済

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

hajsu00
hajsu00

総合スコア118

Ruby on Rails

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

JavaScript

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

Ajax

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

1回答

0評価

0クリップ

142閲覧

投稿2022/06/16 00:19

編集2022/06/19 20:11

転職用のポートフォリオを作成中です。
グループ機能の「グループへの参加」「グループから退会」ボタンを素の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"=>"グループに参加"} 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)

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

ohoh5454

2022/06/19 10:07

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

2022/06/19 10:48

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

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

JavaScript

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

Ajax

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