[Rails 5] [Turbolinks] What to do when JS does not work due to page transition or browser back

Implemented function

Development environment

ruby > 2.6.5
rails > 5.2.4.2

Implemented JS

$(document).ready(function(){
   $("#menu").on("click", function() {
      $(this).next().slideToggle();
   });
});

Using jquery, I added a hamburger menu that can be opened and closed without any change. Aside from the good and bad of the JS code itself, there should be no problem in operation.

Status

It works fine at initial load. The behavior is strange at the time of page transition and browser back. It ignites with a click, but it loops opening and closing and is unstable. It works normally when reloaded.

Consideration and countermeasures

It's working, so maybe the loading timing is wrong? → You can't even try everything like ready ʻonload ʻajaxStop.

After consulting with Google Sensei, I found such a description

$(document).on('turbolinks:load', function () {
...
});

turbolinks: load I've never seen this ... Apparently Rails' own description.

Handling of Turbolinks

I referred to this article. turbolinks cheat sheet

What are Turbolinks?

--Library (Gem) for speeding up page transition by Ajax --From the user's point of view, it is displayed / behaves like a normal page transition. --Installed by default from Rails 4

In other words, this function seems to have affected JS this time.

How to handle turbolinks

Since it is a Gem, it can be solved by erasing it, but it will not be solved. I researched how to handle it.

This is the main treatment.

  1. Disable turbolinks for each \ tag
  2. Disable (delete) turbolinks itself
  3. Do not adapt turbolinks when loading JS, change timing

1. Disable turbolinks for each \ tag

If you specify {"turbolinks "=> false} in the link itself That link will have turbolinks disabled.

<%= link_to "HOGE", root_path, data: {"turbolinks" => false} %>
<%# => <a data-turbolinks="false" href="/">HOGE</a> %>

If you write this, you can definitely remove turbolinks. It seems to be good if you control only a specific script, but it seems to be difficult to write it all ...

2. Disable (delete) turbolinks itself

Remove Gem

Delete this line

Gemfile


#gem 'turbolinks', '~> 5'

Terminal


$ bundle update

Edit application.js

app/assets/javascripts/application.js


//= require turbolinks #Delete this line

Edit application.html.erb

'data-turbolinks-track': Remove'reload'.

erb:app/views/layouts/application.html.erb


<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

It has now been disabled. It may be certain that it will be disabled unless it is a site that makes heavy use of JS.

3. Do not adapt turbolinks to JS loading

Like ready ʻonload` etc. With this description, turbolinks can be loaded without adaptation.

$(document).on('turbolinks:load', function () {
...
});

In addition, you can change the timing of applying turbolinks. If you want to know more, please click here. [Take other life cycle events](https://qiita.com/morrr/items/54f4be21032a45fd4fe9#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3 % 83% A9% E3% 82% A4% E3% 83% 95% E3% 82% B5% E3% 82% A4% E3% 82% AF% E3% 83% AB% E3% 82% A4% E3% 83 % 99% E3% 83% B3% E3% 83% 88% E3% 82% 92% E3% 81% A8% E3% 82% 8B "Take other life cycle events")

I think this is the best solution this time, as fine-tuning works for each script.

Summary

Is Turbolinks a great feature or a noisy feature ... I can't say either for now lol I'm sure it should be installed by default, but ... If you know how to use it more effectively, please leave a comment!

Recommended Posts

[Rails 5] [Turbolinks] What to do when JS does not work due to page transition or browser back
[Rails] What to do when rails s does not respond or does not stop
What to check when rails db: migration does not pass
What to do when debugging "Source not found"
[Grails] Error occurred running What to do when the Grails CLI does not start
What to do when is invalid because it does not start with a'-'
What to do if the update does not take effect after deploying Rails AWS
What to do when JSF tags do not become HTML
What to do when routing settings do not work after building Docker environment with Laravel
What to do if the JSONHint annotation does not work with lombok and JSONIC
Bluemix Infrastructure VPN does not connect because it does not support NPAPI! What to do when [Mac]
[Ruby on Rails] When parameter id acquisition does not work
What to do when Method not found in f: ajax
What to do when "relation" hibernate_sequence "does not exist" in the ID column of PostgreSQL + JPA
What to do if the app is not created with the latest Rails version installed when rails new
[Rails] What to do if data is not registered in DB
What to do when the changes in the Servlet are not reflected
Spring should be suspected when Rails commands do not work properly
java.security.InvalidKeyException: What to do when Illegal key size or default parameters
What to do when javax.batch.operations.JobStartException occurs
What to do when Blocked Host: "host name" appears in Ruby on Rails
Simulator does not work: Unable to boot device due to insufficient system resources
What to do when "call'Hoge.connection' to establish a connection" appears on rails c
[Rails] What to do when the Refile image is not displayed when writing the processing at the time of Routing Error
What to do when a javax.el.PropertyNotWritableException occurs
[Rails] [Memo] When to add = to <%%> and when not
What to do when undefined method ʻuser_signed_in?'
What to do if you get Could not locate Gemfile or .bundle / directory
Code written in Java-TeraPad starting from beginner does not work due to error
What to do if ffi installation fails when launching an application in Rails
[Ubuntu] What to do when MongoDB cannot be started due to a SocketException error
What to do when ‘Could not find’ in any of the sources appears in the development environment with Docker × Rails × RSpec
What to do if you get an error saying "Could not find a JavaScript runtime." When starting rails server