teratail header banner
teratail header banner
質問するログイン新規登録

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

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

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

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

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

Q&A

1回答

788閲覧

button_toの時remote:trueが効かない

mopchan

総合スコア1

Ruby on Rails 6

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

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

0グッド

1クリップ

投稿2023/06/22 00:46

0

1

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • Rails6にて非同期処理をしたい

前提

ここに質問の内容を詳しく書いてください。
Rails6にてlink_toでPOSTアクションやDELETEアクションのリクエストを送っている箇所がGETアクションでリクエストが送られる現象が発生した。
そのため、button_toに変更することによって、無事、正常なリクエストで送ることができた。
しかし、button_toにするとremote:trueオプションを追加してもContent-Type:がHTML形式で送られているため
JSファイルを表示せずエラーが発生する

発生している問題・エラーメッセージ

Image from Gyazo

Ruby

1Started DELETE "/tweets/180/like" for 192.168.176.1 at 2023-06-22 00:37:14 +0000 2Cannot render console from 192.168.176.1! Allowed networks: 127.0.0.0/127.255.255.255, ::1 3Processing by LikesController#destroy as HTML 4 Parameters: {"authenticity_token"=>"[FILTERED]", "tweet_id"=>"180"} 5 Tweet Load (4.4ms) SELECT `tweets`.* FROM `tweets` WHERE `tweets`.`id` = 180 LIMIT 1 6 ↳ app/controllers/likes_controller.rb:8:in `destroy' 7 User Load (7.0ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 103 ORDER BY `users`.`id` ASC LIMIT 1 8 ↳ app/controllers/likes_controller.rb:9:in `destroy' 9 TRANSACTION (1.2ms) BEGIN 10 ↳ app/models/user.rb:36:in `unlike' 11 Like Destroy (4.3ms) DELETE FROM `likes` WHERE `likes`.`user_id` = 103 AND `likes`.`tweet_id` = 180 12 ↳ app/models/user.rb:36:in `unlike' 13 TRANSACTION (2.3ms) COMMIT 14 ↳ app/models/user.rb:36:in `unlike' 15Completed 406 Not Acceptable in 117ms (ActiveRecord: 23.6ms | Allocations: 6649) 16 17 18 19ActionController::UnknownFormat (LikesController#destroy is missing a template for this request format and variant. 20 21request.formats: ["text/html"] 22request.variant: []): 23

該当のコード

# app/views/tweets/_like.html.erb <%= button_to tweet_like_path(tweet), id: "like-botton-#{tweet.id}", remote: true do %> <i class="fa fa-heart-o m-l-xl"></i> <% end %>
# app/views/tweets/_unlike.html.erb <%= button_to tweet_like_path(tweet), id: "unlike-botton-#{tweet.id}", method: :delete, remote: true do %> <i class="fa fa-heart m-l-xl"></i> <%= tweet.liked_users.size %> <% end %>
# app/views/tweets/_likebotton.html.erb <% if tweet.liked_by?(current_user)%> <%= render "tweets/unlike", tweet: tweet, cached: true %> <% else %> <%= render "tweets/like", tweet: tweet, cached: true %> <% end %>
# app/views/tweets/_tweet.html.erb <div class="row justify-content-center"> <div class="col-lg-4"> <div class="card widget white-bg p-xl"> <ul class="list-unstyled m-t-sm"> <li> <%= image_tag tweet.user.image_url, class: 'img-sm m-r-sm'%> <h2><%= link_to tweet.user.name, other_mypage_path(tweet.user) %></h2> <% unless user_signed_in? %> <% else %> <%= render 'botton', tweet: tweet, cached: true if current_user.own?(tweet) %> <% end %> </li> <div class="m-t-lg"> <li> <%= link_to tweet.text, tweet_path(tweet), class: "click" %> </li> <li> <% if tweet.image.file.nil? %> <% else %> <%= image_tag tweet.image_url, size: '300x300'%> <% end %> </li> <li class="m-t-md"> <% unless user_signed_in? %> <% else%> <%= render 'likebotton', tweet: tweet, cached: true unless current_user.own?(tweet) %> <%= render 'commentbotton', tweet: tweet, cached: true unless current_user.own?(tweet) %> <% end %> </li> </div> </ul> </div> </div> </div>
# app/controllers/likes_controller.rb class LikesController < ApplicationController def create @tweet = Tweet.find(params[:tweet_id]) current_user.like(@tweet) end def destroy @tweet = Tweet.find(params[:tweet_id]) current_user.unlike(@tweet) end end
# app/javascript/packs/application.js import Rails from "@rails/ujs" import Turbolinks from "turbolinks" import * as ActiveStorage from "@rails/activestorage" import "channels" import 'inspinia-local/js/popper.min.js' import 'inspinia-local/js/jquery-3.1.1.min' import 'inspinia-local/js/bootstrap.min' import 'inspinia-local/js/jquery.jscroll.min.js' Rails.start() Turbolinks.start() ActiveStorage.start()

補足情報(FW/ツールのバージョンなど)

application.js内のturbolinkなどを削除しましたが、変化ありませんでした。

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

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

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

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

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

guest

回答1

0

この回答はGPT-4による自動生成回答です

LikesControllercreateおよびdestroyアクションで、リクエストフォーマットがHTMLの場合にも対応するために、respond_toを使用して、JSフォーマットに対応するようにしてみてください。

ruby

1# app/controllers/likes_controller.rb 2 3class LikesController < ApplicationController 4 def create 5 @tweet = Tweet.find(params[:tweet_id]) 6 current_user.like(@tweet) 7 respond_to do |format| 8 format.js 9 end 10 end 11 12 def destroy 13 @tweet = Tweet.find(params[:tweet_id]) 14 current_user.unlike(@tweet) 15 respond_to do |format| 16 format.js 17 end 18 end 19end

また、create.js.erbおよびdestroy.js.erbファイルをapp/views/likesディレクトリに作成し、非同期処理を実行するJavaScriptコードを記述してください。

例:

javascript

1// app/views/likes/create.js.erb 2 3$("#like-botton-<%= @tweet.id %>").replaceWith("<%= j(render 'tweets/unlike', tweet: @tweet) %>"); 4 5// app/views/likes/destroy.js.erb 6 7$("#unlike-botton-<%= @tweet.id %>").replaceWith("<%= j(render 'tweets/like', tweet: @tweet) %>");

これにより、button_toremote: trueオプションを使用した場合でも、JSファイルが正しく表示されるはずです。

投稿2023/06/22 02:00

teratail-ai

Powered by GPT-4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問