基礎編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で使えるように
❷ブックマークボタンをajax化
link_toにremote:trueを指定し、非同期処理にする。
これによって、コントローラのレンダリング先がhtmlではなくjsになる。
(_bookmark.html.erbと_unbookmark.html.erb)
❸ブックマークの切り替え処理を追加する
javascriptで実装する *ファイルを置く場所注意
(app/views/bookmarks/create.js.erb)
(app/views/bookmarks/destroy.js.erb)
①htmlでのidを指す。