[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.

Disable turbolinks for each \ tag

Disable (delete) turbolinks itself

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!