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

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

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

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

Ajax

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

Q&A

解決済

1回答

1665閲覧

お気に入り機能の動作がうまくいかない

anguraaaa

総合スコア21

Ruby on Rails 5

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

Ajax

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

0グッド

0クリップ

投稿2020/04/05 05:58

編集2020/04/05 06:00

前提・実現したいこと

railsで掲示板のお気に入り機能(ajax)を実装しています。

押したお気に入りボタンと掲示板が対応していないです。再読込すると、正しく動作します。
ですから、ajaxのコードに問題があると思います。

画像を撮影しました。

タイトル0ではうまく動作します
https://gyazo.com/6c59352a587feed7f96bd204e2b38ce4

タイトル1の場合はうまくいきません
https://gyazo.com/76da50efc5ebc1b0f179028f18110989

掲示板=board, お気に入り=bookmarkとしています

ご教授のほどよろしくお願いいたします。

該当のソースコード

boards_controller.rb class BoardsController < ApplicationController before_action :set_board, only: %i[edit update destroy] def index @boards = Board.all.includes(:user) end def new @board = Board.new end def create @board = current_user.boards.new(board_params) if @board.save redirect_to boards_url, success: '掲示板を作成しました' else flash.now[:danger] = '掲示板を作成できませんでした' render :new end end def edit; end def update if @board.update(board_params) redirect_to board_url(@board), success: '掲示板を更新しました' else flash.now[:danger] = '掲示板を更新できませんでした' render :edit end end def show @board = Board.find(params[:id]) @comment = Comment.new @comments = @board.comments.includes(:user).order(created_at: :desc) end def destroy @board.destroy! redirect_to boards_url, warning: '掲示板を削除しました' end def bookmarks @bookmark_boards = current_user.bookmark_boards.includes(:user) end private def board_params params.require(:board).permit(:title, :body, :image, :image_cache) end def set_board @board = current_user.boards.find(params[:id]) end end
bookmarks_controller.rb class BookmarksController < ApplicationController before_action :set_board, only: %i[create destroy] def create @bookmark = current_user.bookmarks.new(board_id: params[:board_id]) @bookmark.save end def destroy @bookmark = current_user.bookmarks.find_by(board_id: params[:board_id]) @bookmark.destroy! end private def set_board @board = Board.find(params[:board_id]) end end
user.rb class User < ApplicationRecord authenticates_with_sorcery! has_many :boards, dependent: :destroy has_many :comments, dependent: :destroy has_many :bookmarks, dependent: :destroy has_many :bookmark_boards, through: :bookmarks, source: :board validates :last_name, presence: true, length: { maximum: 255 } validates :first_name, presence: true, length: { maximum: 255 } validates :password, length: { minimum: 3 }, if: -> { new_record? || changes[:crypted_password] } validates :password, confirmation: true, if: -> { new_record? || changes[:crypted_password] } validates :password_confirmation, presence: true, if: -> { new_record? || changes[:crypted_password] } validates :email, presence: true, uniqueness: true def own?(object) id == object.user_id end end
board.rb class Board < ApplicationRecord mount_uploader :image, ImagesUploader belongs_to :user has_many :comments, dependent: :destroy has_many :bookmarks, dependent: :destroy validates :title, presence: true, length: { maximum: 255 } validates :body, presence: true, length: { maximum: 65_535 } def bookmark_by?(user) bookmarks.where(user_id: user.id).exists? end end
bookmark.rb class Bookmark < ApplicationRecord belongs_to :user belongs_to :board validates :user_id, uniqueness: { scope: :board_id } end
こちらはboards/index.html.erbの部分テンプレートです boards/_board.html.erb <div class="col-sm-12 col-lg-4 mb-3"> <div id="board-id-1"> <div class="card"> <%= image_tag board.image.url, size: '300x200' %> <div class="card-body"> <h4 class="card-title"> <%= link_to board.title, board_path(board) %> </h4> <% if current_user.own?(board) %> <%= render 'crud_menus', board: board %> <% else %> <div id = "bookmark_btn_<% board.id %>" style='display: inline; float: right;'> <%= render 'bookmark_area', board: board %> </div> <% end %> <ul class="d-flex flex-column list-unstyled"> <li class="p-0"><i class="fas fa-user"></i> <%= board.user.decorate.full_name %></li> <li class="p-0"><i class="far fa-calendar-alt"></i> <%= l board.created_at %></li> </ul> <p class="card-text"><%= board.body %></p> </div> </div> </div> </div>
こちらは_board.html.erbの部分テンプレートです boards/_bookmark_area.html.erb <% if board.bookmark_by?(current_user) %> <%= render 'bookmarks/unbookmark', board: board %> <% else %> <%= render 'bookmarks/bookmark', board: board %> <% end %>
bookmarks/_bookmark.html.erb <%= link_to icon('far', 'star'), board_bookmarks_path(board.id), remote: true, method: :post, id: :"js-bookmark-button-for-board-#{board.id}" %>
bookmarks/unbookmark.html.erb <%= link_to icon('fas', 'star'), board_bookmarks_path(board.id), remote: true, method: :delete, id: :"js-bookmark-button-for-board-#{board.id}" %>
bookmarks/create.js.erb $('#bookmark_btn_<% @board.id %>').html("<%= j(render 'boards/bookmark_area', { board: @board })%>");
bookmarks/destroy.js.erb $('#bookmark_btn_<% @board.id %>').html("<%= j(render 'boards/bookmark_area', { board: @board })%>");

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

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

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

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

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

guest

回答1

0

自己解決

create.js.erbとdestroy.js.erbファイルのidの部分を
'#bookmark_btn_<% @board.id %>'から'#js-bookmark-button-for-board-<%= @board.id %>'へと変更することで解決しました。
つまり、_board.html.erbにidを与えるのではなく、_bookmark.html.erbと_unbookmark.html.erbのidを直接、受け取ってboards/bookmark_area.html.erbにレンダリングすることでajaxの処理がうまくいきました。

投稿2020/04/10 01:05

anguraaaa

総合スコア21

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問