結論
turbolinksを無効にすると動くかもしれません。
エラー解消までの経緯
Materializeとは
簡単にマテリアルデザインを導入できるCSSフレームワークです。
Bootstrapで仕上げたUIを垢抜けさせることができるのが良い。
しかし各コンポーネントを使用する際は独特な設定や制約があり、なかなか癖があります。
Matelializeはややこしい
様々なコンポーネントを使用する前はjQuery(もしくはJS)で初期設定が必要です。
また例えばselectフォームは
f.labelより先にf.selectを書かなくてはいけない。
以下のように。
(通常のRailsで作成するselectフォーム)
<%= f.label :column %>
<%= f.select :column, ~ %>
(Materializeでselectを作成するとき)
<%= f.select :column, ~ %>
<%= f.label :column %>
それならRailsのフォームでサクッと完成させたいと思うとあることに気付きます。
...Materializeを導入したあとはRailsのフォームが表示されないのです。
そこで何とかselectを動作させるため色々いじっていたらタイトルにある通り正常に動作しないエラーが出てしまいました。
原因の発見
前提
- JSはSprocketsで管理
エラー解消の手順
「 フォームが正常に動作しない 」とはページをリロードしないとselectが表示されず、
consoleにエラーが何も出ない状態でした。
そこでjQueryがきちんと読み込めていないと仮設を立てて
layouts/application.html.erbと assets/javascripts/application.js
を確認。
気になるところを発見しました。
<%= javascript_include_tag 'application', data-turbolinks-track': 'reload' %>
turbolinksをキーワードに調べることに。
turbolinksの問題点
$(document).ready(function() が発火しない
turbolinksの主な動作は、
fetchReplacement
< a >タグのリンクをajax化するfetchHistory
戻るなどでページ遷移する際、復元できるページであれば復元する
以上どちらの動作においても readyが発火しないそう。
turbolinksを使いながらjQueryを使いたいとき
$(document).on 'ready page:load'で
jQueryのreadyとturbolinksのpage:loadどちらも定義するjquery-turbolinks gemで上記の対策をとってもらうturbolinksを無効にする
turbolinks無効の手順
(Gemfile)
gem 'turbolinks' #削除
(assets/javascripts/application.js)
//= require jquery
//= require materialize
//= require turbolinks #削除
//= require rails-ujs
//= require_tree .
(layouts/application.html.erb)
<head>
<%= stylesheet_link_tag 'application', media: 'all' %>
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_include_tag 'application' %>
- <%= javascript_include_tag 'materialize', 'data-turbolinks-track': 'reload' %>
+ <%= javascript_include_tag 'materialize' %>
</head>
Materializeのselectが特定の環境下でのみ動作しないとき
- 公式Githubをcloneする
https://github.com/Dogfalo/materialize -
js/select.jsを自分の環境下(JSを読み込んでいる場所)に配置する - assets/javascripts/application.jsで
select.jsを読み込む
以上の手順ではiOS13などでの動作がうまく行かないときに有効のようです。