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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Ajax

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

Q&A

解決済

1回答

1406閲覧

Ajaxでお気に入り表示を実装したが、うまく表示されない

kousuke24

総合スコア29

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Ajax

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

0グッド

1クリップ

投稿2019/09/29 07:13

現在Ruby on Railsで猫の画像投稿サイトを作成しており、Ajaxを使用しお気に入り機能を作成しています。
エラーは出ていないのですが、お気に入りのボタン表示がうまく表示されません。

①画像一覧ページから画像をクリック
イメージ説明

②画像詳細ページの表示
イメージ説明
イメージ説明

③「お気に入り解除」「お気に入り登録」をクリック
イメージ説明
イメージ説明

上記のように「お気に入り」の表示が四分割されてしまいます。


画像詳細ページ show.html.erb

<div class="container"> <div class="col-sm-10 col-sm-offset-1 mx-auto"> <div class="row"> <div class="col-sm-8"> <div class="card-left mt-3"> <%= image_tag @post.photos.first.image.url(:medium), class: "card-img-top" %> </div> </div> <div class="col-sm-4"> <div class="card-right mt-3"> <div class="post-title text-center"><h3><%= @post.caption %></h3></div> <% if user_signed_in? %> <div class="row"> <div id="like-icon-<%= @post.id.to_s %>"> <% if @post.liked_by(current_user).present? %> <%= link_to "お気に入り解除", post_like_path(@post.id, @post.liked_by(current_user)), method: :DELETE, remote: true %> <% else %> <%= link_to "お気に入り登録", post_likes_path(@post), method: :POST, remote: true %> <% end %> </div> <% if @post.user_id == current_user.id %> <%= link_to post_path(@post), method: :delete, data: { confirm: "本当に削除してよろしいでしょうか?" }, class: "btn btn-danger ml-3" do %> <div>画像削除</div> <% end %> <% end %> </div> <% end %> <hr> <h5 class="text-center m-3">投稿ユーザー</h5> <div class="text-center post-user"> <% if @user.image? %> <%= image_tag @user.image.thumb.url, class: "round-img" %> <% else %> <%= image_tag "/assets/default.jpg", class: "round-img" %> <% end %> <br> <div class="m-3"> <%= link_to user_path(@post.user), class: "black-color no-text-decoration post-user-name", title: @post.user.name do %> <h4><strong><%= @post.user.name %></strong></h4> <% end %> </div> </div> </div> </div> </div> </div> </div>

create.js.erb

$('#like-icon-<%= @post.id.to_s %>'). html('<%= link_to "お気に入り登録", post_like_path(@post.id, @like), method: :DELETE, remote: true, class: "btn btn-primary ml-3" %>');

destroy.js.erb

$('#like-icon-<%= @post.id.to_s %>'). html('<%= link_to "お気に入り解除", post_likes_path(@post), method: :POST, remote: :true, class: "btn btn-dark ml-3" %>');

cotroller.rb

class LikesController < ApplicationController before_action :authenticate_user! def create @like = current_user.likes.build(like_params) @post = @like.post if @like.save respond_to :js end end def destroy @like = Like.find_by(id: params[:id]) @post = @like.post if @like.destroy respond_to :js end end private def like_params params.permit(:post_id) end end

おそらくshow.html.erbとajaxで処理が別れてしまっていると思うのですが、解決方法がわかりません。
ご教授頂ければ幸いです。

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

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

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

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

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

guest

回答1

0

自己解決

コードは全く変えず、もう一度入力しなおしたらうまく行きました。
おそらく読み込みのバグか何かが原因だったと思われる。

投稿2019/09/29 12:40

kousuke24

総合スコア29

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問