【Ruby on Rails】Ajax化について学習メモ✍
学習メモ📝
Ajax
- Asynchronous JavaScript + XML の略
- 非同期通信と呼ばれる通信方法
- 逆に同期通信は画面の切り替わりが起きる(画面が一瞬白くなる)
- 地図アプリで画面が切り替わらずに操作できるイメージ
RailsではUJS: Unobtrusive(控えめな)JavaScriptという、HTMLの中にJavaScriptを混入させないという意図に由来して、組み込みヘルパーが用意されている。
form_with ・・・フォームの作成を支援
link_to ・・・リンクの生成を支援
button_to ・・・ボタンの作成を支援
(※form_withはデフォルトでAjaxが利用できる)
実装方法
①remote:true形式←コチラ採用
②ajax関数を使った形式
- リダイレクト処理していたアクションを変更
- redirect_back等の記述がせれていたら削除
- Ajaxでサーバーにリクエストを送る処理を追加
- ヘルパーにremote: trueを指定
- レンダリングが、htmlではなくjsファイルで実行される
- 実行したい内容を記載した jsファイル(js.erb)を作成
- htmlメソッド(もしくはreplaceWithメソッド)を用い、指定したセレクタのhtml部分(指定したid属性を持つ部分)を置き換える
(例)
$("#js-bookmark-button-for-board-<%= @board.id %>").replaceWith("<%= j(render('boards/unbookmark', board: @board)) %>");
参照
