ついにAjaxの機能を実装する時がきてしまいました。
説明だけ読んでなんとなーく、そういうもの、という理解はあったものの、
実際にコードを書くとなるとわけわかめで、すごく時間がかかりました。
しかし今回実装できたので大まかな流れというか、書き方はざっくりとわかったのでまとめておこうと思います。
一応、ざっくりAjaxとは
wikiより
Ajax（エイジャックス[1][2]、アジャックス[3]）は、ウェブブラウザ内で非同期通信を行いながらインターフェイスの構築を行うプログラミング手法である[4]。XMLHttpRequest（HTTP通信を行うためのJavaScript組み込みクラス）による非同期通信を利用し、通信結果に応じてダイナミックHTML(DHTML) で動的にページの一部を書き換えるというアプローチを取る[5]。
AjaxはAsynchronous JavaScript + XML の略で、2005年2月18日に米国のインフォメーションアーキテクトであるJesse James Garrettにより名付けられた[5][6][7]。
ブックマークボタンの色をAjaxで変える
説明を読んでも、言ってることはなんとなくわかる、、が、どうしてそういう風になるの？意味がわからない！！！！！！
って感じだったんですが、コードを書いたり消したり、エラーを吐き出しまくって
なんとなーくうっすら流れがわかってきました。
大まかな流れ
- viewの部分にjavascriptの表示されルためのパーシャルに導くコードを書く
- パーシャルの部分にブックマークされた時に表示されるon/offの2パターンのコードを書く
- create.jsとdestroy.jsにjavascriptの同じコードを書く
他に前提としてgemだったりrequrireを書いたりとかはあるんですが、それは最初に言われた通り書けば、まあよかったのですが、上記の流れがまずわからなかったのでそこがまず理解できたのでよかったです。
実際に書いたコード
view(index.html.erb)
<%= render partial: "bookmarks/bookmark", locals: {trick: trick} %>
</div>
パーシャル(_bookmark.html.erb)
<% bookmark = current_user.bookmarks.find_by(trick_id: trick.id) %>
<% if bookmark.present? %>
<%= link_to trick_bookmark_path(trick, get_user_bookmark(trick)), method: :delete, remote: true, class: "fas fa-bookmark fa-2x" do %><% end %>
<% else %>
<%= link_to trick_bookmarks_path(trick),method: :post, remote: true, class: "far fa-bookmark fa-2x" do %>
<% end %>
<% end %>
（共通）create.js destroy.js
$('#bookmark_<%= @trick.id %>').html("<%= j(render partial: 'bookmarks/bookmark', locals: {trick: @trick}) %>")
controller( createとdestroy部分に）
respond_to do |format|
format.html
format.js
混乱したところ
そもそも混乱したところしかなかったのですが、、、
2箇所、Ajaxを使いたいところがあり、まず１箇所がブックマーク機能だったのです。
しかし、そのほかのviewの部分とも関連してるため、どのディレクトリの部分にajaxのパーシャルを入れたらいいのかわからなかったりしました。
結局同じディレクトリ内に全部書いて、パーシャルのリンク"bookmarks/bookmark"とかが最初、ええ！アンダーバーいらないの？そもそもこれであってるの？？みたいな感じで理解できなかったんですが。。
こういうものだと思うことにしました。
基本全部入れる、同じディレクトリ。同じ名前のコントローラに書く。以上。って感じでした。
うまくブログにまとめるのって難しいですね。。まだ理解が足りないのかな。。
