概要
イメージとしては、ページの中の一部分だけを遷移することなく読み込み直すことをできるようにするのが非同期通信であり、その一部分をパーシャルとして作成し、リンクにremote trueとすることでアクションと同じ名前で、その一部だけをリロードする設定のjsファイルを読み込ませることで、ページ遷移なく更新することができるといったものである。
いいねのパーシャルを作成
LIKESとLIKEDが表示される部分を非同期で読み込みたいので、ここをパーシャルにする。
ビューにパーシャルを配置
_like_ajax.html.erbがここではパーシャルで、そちら側で使うuserという変数にshowページで使っていたuserpを変換して渡している。これによりパーシャル側でプロフィールユーザのLIKES LIKEDが表示できる。
ここまでは今までのパーシャルと同じである。
リンクにremote trueを追加
これにより、そのリンクが予定しているコントローラのアクションを実行してもページ繊維が行われない代わりに、同名のjsファイルを探してそれを実行するようになる。
jsファイル作成
create.js.erb
destroy.js.erb
likedivというクラスの部分だけ、renderで更新するという意味で、locals以下は、コントローラ（createとdestroy)で定義された変数（@userp)を'shared/like_ajax'に渡している。
つまりその変数に基づいて、パーシャルだけが部分的に更新されるようになっている。
コントローラにjsが仲介してパーシャルに渡す変数を追加
これで指定した部分だけが、更新されるようになる。
参考：https://qiita.com/naberina/items/c6b5c8d7756cb882fb20
ユーザ一覧画面でのいいね機能
ビューのパーシャル部分
このように一覧表示などの同じものが繰り返されるページで非同期通信にしたい時は、その個別のクラスを付与しないと、再読み込みが意図しない場所以外にも適用されてしまう。
ここでは、いいねアイコンをクリックしたユーザのみ繰り返し表示させたいので、クラスが固有のものになるように<%=user.id%>と追加している。
コントローラ
js
ここでも固有のクラスのみを再読み込みするよう設定。ちなみにここでの@userは、コントローラでUser.find_by(params[:id])で取得してきたユーザ。paramsにはいいねのリンク生成時に各ユーザのIDが入るので取り出せるという仕組み。
current_userのクラスも追加されているのは、本記事のその他>複数箇所を同時に非同期で読み込ませる方法を参照。
Likeslist Likedlistでのいいね機能
ビューのパーシャル部分
ユーザ一覧と同じで、クラス名は固有でなくてはならないなど条件がほぼ一緒なので同じクラス名を付した。
js
クラス名が一緒なのでこちらも一緒である。
その他
Ajaxでリダイレクトをする方法
例えばユーザが更新に失敗したときなどは、Flashのメッセージを表示させるのと同時に、ページを遷移させたいときなどがある。Ajaxでは基本的にリダイレクトが使えないので、下記のようにコントローラ内で特殊な指定方法をすることでリダイレクトをできるようにする。
参考:https://medium.com/@SullivanArielle/redirecting-with-remote-true-62f07f4a83a1
複数箇所を同時に非同期で読み込ませる方法
やりたいこと
ユーザ一覧画面でいいねをしたり、消したりする時に、自分のLIKESの数も同時に増減させたい。
下の画像で言うと、シャワーズ（右端）にいいねをすると同時に、admin(自分）のLIKESの数も変化させたい。
やり方
どの部分が再読み込みされるかを定義しているのはjsファイルの設定で、そこをいじればよい。
具体的にはログインしているユーザのクラスも追加で設定すれば、指定したクラスで変化が起きた際に必ずログインしているユーザの部分も再読み込みされるということである。
上の部分はいいねを送ったユーザでそこも再読み込みされ、赤枠の部分で現在のユーザのクラスを持つ場所（自分の欄）も再読み込みされるようになるという仕組みである。