基礎編16

2021.3.29

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

remote: trueを使用

参照

【Rails】簡単なajax処理 （remote true） - bokuの学習記録

ajaxとは：Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のこと。

クライアントとサーバーの間の通信では通常、同期通信と呼ばれる方法が用いられる。

railsにおける命名規則に加え、html形式でレンダリング処理を行うことが事前に定義されている為、tests_controllerのindexアクションが呼び出された場合、views/tests/index.html.erbが対応する。

→「index」という命名規則と「html」というレンダリングの規則を組み合わさって、index.html.erbが選択されている

remote: trueオプションを指定すると、ルーティングを経由し、tests_controllerのindexアクションにremote: trueのオプション付きで遷移する。remote: trueを指定することで、レンダリング処理がhtmlではなくjsファイルで実行される。

→index.js.erbファイルに向かう

<ポイント>

<ajaxのhtmlとreplaceWithメソッドの違い>

参照

ajaxのhtmlとreplaceWithメソッドの違い - sho171のブログ

.html(): 指定した要素の中身を置き換える

.replaceWith(): 指定した要素そのものを置き変える

＊j(renderはexcape_javascript(renderの別名

JavaScriptファイル内にHTMLを挿入するときに実行結果をエスケープするために必要。

<流れ>

❶bookmarks_controller.rbの修正

redirect_backを削除→リダイレクトをされないように。

boardを@をつけてインスタンス変数に変更→❸のrenderで使えるように

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化

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

これによって、コントローラのレンダリング先がhtmlではなくjsになる。

(_bookmark.html.erbと_unbookmark.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 %>

❸ブックマークの切り替え処理を追加する

javascriptで実装する ＊ファイルを置く場所注意

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

①htmlでのidを指す。