【rails5】Ajaxでの二重送信とjQueryが動かない原因

railsを使っていてちょっとだけ詰まったので、紹介しておきますね。

に関してですね。こんな問題雑魚だろって思うかと思いますが、まあ学生なんで良しとしましょう。

送信した値が二重で登録されるんだけど！？

フォームから送信した値が二重でデータベースに保存されるんですよね。この原因はformの書き方にありました。railsってremote: trueつけると勝手にAjax対応してくれるじゃないですか。

...form_for @hoge, remote: true do |f|...

みたいな感じで。これが原因でしたね。以前やったときは、js.erb使ってやっていたのでこの方法で大丈夫みたいでした。ただ今回は、jsファイルの中で$ajaxみたいなことをやったので、こんな記述はいらなかったんですね。

jsファイルの中でajax書けばremote: trueいりません。 jsの中で$ajaxと書くときには以下のようにremote: trueをとったformを使いましょう。

form_for @hoge do |f|

簡単なことでしたね。次行きましょう。

実はこの問題は前にもお会いしました。turbolinks関係の問題です。そのときには以下のようにして解決したんですよね。

gemfileに以下を記述後、bundle install
gem 'jquery-turbolinks'

application.jsに順番を気をつけて記述
//= require jquery.turbolinks

詳しくは以下の記事を見てみましょう↓ qiita.com

だが、今回の場合はそううまくはいきませんでした。前回と何が違うのか考えたところ、今回はrails4ではなくてrails5を使っているんですね。どこか仕様が変わってしまったのだろうか。。。

まあどうせturbolonks関係でバグってるので、application.jsから以下の記述を消しました。

//= require turbolinks

これでとりあえずは、リロードしなくてもjQueryが動作するようになりました。

絶対他に方法あるだろ。。。