解説
- 非同期通信と呼ばれる通信方法(画面が白くなった後に画面が切り替わる通信は同期通信)
- 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 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 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)) %>");