非同期通信の初回挙動不良の対処方法

なんで動かないの！？

アプリ作成をしていてjavaScriptで非同期やインクリメンタルサーチをしたけど、なぜか初回の挙動だけがうまくいってくれない、、！なんてなことないですか？？

今回は同じ事象で困っている人のために解消方法を紹介します。

turbolinksを停止しよう

turbolinksとはgemとしてRailsアプリケーションに導入されている機能です。
今回の挙動の動作不良は手作業で作成したAjaxとturbolinksが競合してしまい、うまく作動しない可能性が考えられます。

1.Gemfileからturbolinksの部分をコメントアウトする

gem 'turbolinks', '~> 5'
< --- コメントアウトしましょう --- >
# gem 'turbolinks', '~> 5'

bundleinstallも忘れず実行する

$ bundle install

2.application.html.hamlからturbolinksの関連部分を削除する

application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %title PracticeApp
    = csrf_meta_tags

    / 修正前 
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' ← このオプションを消す
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' ← このオプションを消す

    / 修正後
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'
  %body
    = render "layouts/notifications"
    = yield

３.application.jsからturbolinksの関連部分を削除する

//= require jquery
//= require jquery_ujs
//= require turbolinks　 <--- こいつを消してあげる
//= require_tree .

以上