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)

<%= 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' %> ```

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

Recommended Posts

When the form such as Select of Materialize does not work properly
When @Transactional of Spring Boot does not work
About the matter that: nth-child (-n + m) does not work as intended in the selector of jsoup
Does the escape sequence (\) not work? (for Mac)
@BeforeStep does not work in Tasklet of spring-batch
Does not recognize the library when implementing jcaptcha
"Do not show again" check does not work in the warning dialog when starting applet
Customize the display when an error such as 404 Not Found occurs in Spring Boot
[Note] When the page access speed does not increase
When the server does not start with rails s
A memo when the incoming number acquisition using Broadcast Receiver does not work on Android 9/10
[Ruby on Rails] When parameter id acquisition does not work
[Rails] Solving the problem that session timeout does not work
Docker does not work when DOCKER_HOST is specified in WSL2
[Rails] When the layout change of devise is not reflected
How to get the log when install4j does not start
The selected JRE does not support the current compliance level of 15
What to do when "relation" hibernate_sequence "does not exist" in the ID column of PostgreSQL + JPA
Test the behavior of the log output logger when using an external logging API such as SLF4J
Spring should be suspected when Rails commands do not work properly
Pay.JP Solution when it can be done locally but it does not work well in the production environment