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

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

新規登録して質問してみよう
ただいま回答率
85.46%
非同期処理

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

Q&A

1回答

317閲覧

いいね機能(非同期通信)がリロードしないと動かない

kiru226

総合スコア1

非同期処理

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

0グッド

0クリップ

投稿2020/09/14 03:23

###前提・実現したいこと
マッチングアプリのいいね機能を実装しましたが、下記の画像の通り、いいねがリロード後に反映されてしまいます。
イメージ説明
###コード
■users/show.html.erb (該当箇所)

<div class="text-center" id="user-description"> <%= @user.nickname %> <% if user_signed_in? %> <div id= "follow_form"> <% if current_user.following?(@user) %> <div class="btn btn-default" id="liked">リクエスト済</div> <% else %> <%= render 'users/follow', {relationship: @relationship} %> <% end %> </div> <a href="<%= root_path %>" > トップページに戻る </a> <% end %> </div>

■users/_follow.html.erb

<%= form_with model: relationship, remote: true do |f| %> <div> <%= hidden_field_tag :following_id, @user.id %> </div> <%= f.submit "観戦リクエスト" ,class:"btn btn-primary" %> <% end %>

■users/create.js.erb

$("#follow_form").html(`<div class="btn btn-default" id="liked">リクエスト済</div>`)

■users_controller.rb

class UsersController < ApplicationController def index @search_params = user_search_params @users = User.search(@search_params) end def show @user = User.find(params[:id]) @relationship = Relationship.new end private def user_search_params params.fetch(:search, {}).permit(:sex_id, :likesports_id, :liketeam_id, :watching_date_from, :watching_date_to, :prefectures_id, :job_id,:marriage_id) end end

■relationship_controller.rb

class RelationshipsController < ApplicationController def create #current_user.active_relationships.create(create_params) @relationship = current_user.active_relationships.new(create_params) if @relationship.save @follower_user = current_user @following_user = User.find(params["following_id"]) @matching = @following_user.following?(current_user) respond_to do |format| format.json end else render :template => "users/show" end end def destroy relationship = Relationship.find(params[:id]) relationship.destroy redirect_to controller: 'users', action: 'index' end private def create_params params.permit(:following_id) end end

###試したこと
下記記事を参考にviewのid箇所をdivではなくspanで指定

■参考記事
https://qiita.com/kjurata/items/70201e0ec781aeb4448d

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

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

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

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

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

miyabi_takatsuk

2020/09/14 03:36 編集

Ruby on Railsお使いですよね? 質問タグにそれと、JavaScriptの質問タグも追加しておきましょう。 また、Rubyでのサーバーサイドだけでは、ボタンクリックなどの動作における表示更新はできないことは認識ありますでしょうか? (JavaScriptによる表示更新が必要)
guest

回答1

0

非同期処理をしたなら、API側が返してくれる値を元に
自身で「リクエスト済」に切り替える処理を入れる必要があります

投稿2020/09/14 03:34

yambejp

総合スコア115010

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問