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

Ajaxとは

Webブラウザ上で非同期通信を行い、ページ全体の再読み込み無しにページを更新する方法のこと。

クライアントとサーバー間の通信においては、通常、同期通信と呼ばれる方法が用いられ、一瞬画面が白くなった後、画面が切り替わるような通信は、全てこの同期通信です。 この同期通信の間、クライアントは他の作業を行うことができません。 これは、クライアントからサーバーに対してページ全ての情報を返すようリクエストが送られているためであり、リクエストを送ったクライアントは、サーバーかの応答があるまでその結果を待機し、結果を受け取った後に画面全体を切り替える処理を行う。

一方、非同期通信では、クライアントからのリクエスト送信後、サーバーの処理中にも、他の作業を行うことができる。

非同期通信の方法は二種類

・remote:true形式

・ajax関数を使った形式

今回はremote:true形式で実装する。

コントローラーの修正

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

redirect_toの削除

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

link_toにremote: trueを指定して、非同期処理にする。

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 %>

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

ブックマーク時と解除時に、ブックマークのアイコンを切り替える処理をjavascriptで実装する。

HTML形式のリクエストで送信していた時はcreateアクションやdestroyアクションでビューの作成はしていないのでリダイレクト処理でどのページに遷移するか指定していたが、今はremote: trueでJS形式のリクエストで送信しているのでアクション通過後に部分的に更新させるためのJSファイルを作成する。

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)) %>");

参考文献

qiita.com

qiita.com