こんにちはやべっちです。
Ajaxするために「rails ajax」とかで調べるとremote trueを使ってAjaxにする記事が非常に多いです。
しかし、これだと汎用性が低くて応用が中々きかないのです。
私の場合こんな機能を作りました。
モーダルを出す→写真を選択→決定を押したら自動でモーダルが閉じられてAjaxで写真が更新される
このようなちょっとした応用で実装したい場合はremote trueだと実装が難しい。
(少なくと私はトライしてモーダルを自動で閉じるようなことはできませんでした。)
今回はremote trueを使わないでAjaxする記事が非常に少なかったのでメモしました！
Contents
モーダルの作成について
モーダルの作成はmodaalというプラグインで簡単に作成することができました！
参考にしたサイトはこちらです。
・便利なモーダルプラグイン MODAAL
https://www.tam-tam.co.jp/tipsnote/html_css/post8031.html
これはmodaalというjsファイルを入れるだけでモーダルが作成できちゃいます。
このようにjsファイルに記述すると大きさも指定ができてモーダルが表示されます。
おそらく一番簡単にモーダルを作成する方法だと思います！
Ajaxの記述について
user-edit.js
jsファイルはこんな感じで
user-information.html.haml
ビューはこんな感じ。順を追って上からコードの説明します。
modaal(‘close’)について
jsファイルの最初の部分はsubmitボタンが押された時にmodaal(‘close’)が発火するようにしてモーダルを閉じます。
これはmodaalの使い方に書いてあるので参考にしました。
preventDefaultについて
フォームが送信された時に、デフォルトだとフォームを送信するための通信が行われるため、デフォルトのイベントを止めるためにpreventDefault()を使用します。
formdataについて
FormDataオブジェクトの引数はthisとなっています。イベントで設定したfunction内でthisを利用した場合はイベントが発生したDOM要素を指します。
ここではform_forのクラスである.edit_userの中の情報を指しています。
ajaxで値をコントローラーのupdateアクションに渡す
$.ajax({
url: "/users/" + id,
type: "PATCH",
data: formData,
dataType: 'json',
processData: false,
contentType: false
ここでusersコントローラーのupdateアクションに値が送られるようにurlを指定しました。
dataTypeはjson形式で渡します。
実際にrake routesコマンドでルーティングを見ると
PATCH /users/:id(.:format) users#update
となっているのでここに値が渡るように指定しました。
usersコントローラーについて
updateアクションの中はこのように定義しています。
userの情報をupdateしたいのでupdateアクションを使い、updateする情報についてはprivate以下のuser_paramsに定義しました。
これでuserのupdateしたい値を更新して、databaseに反映されます。
その値をjson形式で渡します。
json.jbuilderファイルを作成する
本来Railsの基本はroutes→controller→viewの基本の流れがあります。
routesでどのコントローラーのアクションを動かすかを定義します。
usersコントローラーのupdateアクションとroutesで定義するなら、それに対応したviewのファイルが呼び出されます。
今回はupdate.json.jbuilderというファイルを作成しました。
これでrailsのjbuilder形式でjsonを返すことができます。
doneの中を書いていく
doneの中はAjaxに成功した時の動きを書きます。
今回は写真を更新したかったので、該当する場所のクラスを消して新しくbackという変数で定義したクラスをappendで書き加えました。
またAjaxがうまく行かなかった時のfailの中も書きます。
これで決して美しい書き方ではないかもしれませんが期待した動きができるようになります！
Ajaxは複雑に見えるけど一つ書けるようになると簡単に書けるようになる
今の流れで十分初心者から見るとすごく複雑に見えるかもしれません。
しかしAjaxはシンプルで
jsファイル→routes→controller→view(json.jbuilder)→jsファイル
という流れさえしっかり頭に入れておけば結構簡単に書けるようになります。
また実際にコードを書いているときに期待した値が送られているかどうか確認するためにconsole.logやbinding.pryをたくさん使いました。
一つでも書けるようになると他のAjaxの動きも応用して書けるようになるので、remote trueを使わずに頑張って書いてみることをおすすめします。
まとめ
・remote trueだと汎用性が低いのでJQueryでしっかり書きましょう。ただしシンプルな動きでAjaxしたいならremote trueは便利なのでうまく使い分けるようにしましょう！
・もっとシンプルでわかりやすい書き方もあると思うのであくまでこの記事は参考程度にしてください。
・cookpadはめちゃくちゃAjaxしてるので鍛えられる(ﾟ∀ﾟ)
