ブックマークボタンのajax化

解説

ajaxとは？

• 非同期通信と呼ばれる通信方法（画面が白くなった後に画面が切り替わる通信は同期通信）
• JavaScriptでサーバー側との通信を「非同期」で行い
• 非同期通信の場合、サーバーの処理中でも他の作業を行える
• link_toにremote: trueを指定すると、レンダリング処理がhtmlではなくjsファイルで実行されるようになる

実装

ブックマークコントローラを修正

app/controllers/bookmarks_controller.rb

class BookmarksController < ApplicationController
  def create
    @board = Board.find(params[:board_id])
    current_user.bookmark(@board)
  end

  def destroy
    @board = current_user.bookmarks.find(params[:id]).board
    current_user.unbookmark(@board)
  end
end

ブックマークボタンをajax化

app/views/boards/_bookmark.html.erb

<%= link_to bookmarks_path(board_id: board.id),
            id: "js-bookmark-button-for-board-#{board.id}",
            class:"float-right",
            method: :post,
# remote: trueを指定してajax化
            remote: true do %>
  <%= icon 'far', 'star' %>
<% end %>

app/views/boards/_unbookmark.html.erb

<%= link_to bookmark_path(current_user.bookmarks.find_by(board_id: board.id)),
            id: "js-bookmark-button-for-board-#{board.id}",
            class:"float-right",
            method: :delete,
# remote: trueを指定してajax化
            remote: true do %>
  <%= icon 'fas', 'star' %>
<% end %>

ブックマークボタンの切り替え処理を追加

app/views/bookmarks/create.js.erb

$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/unbookmark', board: @board)) %>");

app/views/bookmarks/destroy.js.erb

$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/bookmark', board: @board)) %>");