基礎編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_toremote: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を指す。