When the form such as Select of Materialize does not work properly

Conclusion

It may work if turbolinks is disabled.

Background to error resolution

What is Materialize?

A CSS framework that makes it easy to introduce material design. It's nice to be able to clean up the UI finished with Bootstrap. However, there are unique settings and restrictions when using each component, and it is quite quirky.

Matelialize is confusing

--Before using various components, you need to make initial settings with jQuery (or JS).

--For example, the select form must write `f.select``` before `f.label```. As below.

(Select form created with normal Rails)
<%= f.label :column %>
<%= f.select :column, ~ %>

(When creating a select with Materialize)
<%= f.select :column, ~ %>
<%= f.label :column %>

Then you realize that you want to complete it quickly with Rails forms. ... I don't see the Rails form after installing Materialize.

So I managed to make select work, and when I was playing around with it, I got an error that it didn't work properly as the title says.

Finding the cause

Premise

--JS is managed by Sprockets

Error resolution procedure

"Form does not work properly" means that select is not displayed unless the page is reloaded. There was no error in the console.

So if jQuery is not loaded properly, make a temporary assumption

layouts/application.html.erb and assets/javascripts/application.js

 confirm.

 I found a place to be worried about.

<%= javascript_include_tag 'application', data-turbolinks-track': 'reload' %>

 To search for turbolinks as a keyword.

## Problems with turbolinks

#### **`$(document).ready(function()Does not ignite`**
```ready(function()Does not ignite


 The main operation of turbolinks is

- fetchReplacement
 <a> Convert tag links to ajax

- fetchHistory
 When changing pages by returning, restore if the page can be restored

 It seems that `` `ready``` does not fire in either of the above operations.

## When you want to use jQuery while using turbolinks
 --``` $ (document) .on'ready page: load'`` `
 Define both jQuery ``` ready``` and turbolinks ``` page: load```

 --Get the above measures taken with ``` jquery-turbolinks gem```

 --Disable turbolinks

## Procedure for disabling turbolinks

(Gemfile) gem 'turbolinks' #Delete

(assets/javascripts/application.js) //= require jquery //= require materialize //= require turbolinks #Delete //= require rails-ujs //= require_tree .

(layouts/application.html.erb)

When Materialize select doesn't work only under certain circumstances

1. Clone the official Github https://github.com/Dogfalo/materialize
2. Place js / select.js under your environment (where JS is loaded)
3. Load `` `select.js``` in assets / javascripts / application.js

The above procedure seems to be effective when the operation on iOS 13 etc. does not go well.

reference

[What I did to keep the turbolinks off](https://qiita.com/saboyutaka/items/bcc0966313c6f7399a6e#trigger%E3%81%AE%E7%99%BA%E7%81%AB%E3%82 % BF% E3% 82% A4% E3% 83% 9F% E3% 83% B3% E3% 82% B0)

The select tag of the form using materialize cannot be selected correctly on iOS 13

[Rails] Disable turbolinks