[Java] [Rails 5] [Turbo links] What to do when JS does not move due to page transition or browser back

2 minute read

Implemented functions

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 an open and close type hamburger menu. Aside from good and bad of the JS code itself, there should be no problem in operation.

Situation

It works fine at initial load. The behavior is strange at the time of page transition and browser back. Although it is ignited by clicking, it opens and closes in a loop or is unstable. It works normally when reloaded.

Consideration and measures

It’s working, so maybe the timing is wrong? → It is no good to try out ready onload ajaxStop etc.

After consulting with Google Sensei, I found the following description

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

turbolinks:load I have never seen this… Apparently Rails’ own description.

I have referred to this article. turbolinks cheat sheet

  • Library (Gem) for speeding up page transitions with Ajax
  • From the user’s perspective, 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.

Since it is a Gem, it can be solved if it is deleted, but it does not solve the problem. I researched how to handle it.

This is the main treatment.

  1. Disable turbolinks for each <a> tag
  2. Disable (remove) turbolinks themselves
  3. Do not adapt turbolinks when loading JS, change timing

Disable turbolinks for each ##1.<a> tag

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

<%= 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 good to control only a specific script, but it seems to be strict to describe it all…

Remove Gem

Delete this line

Gemfile


# gem'turbolinks','~> 5'

terminal


$ bundle update

Edit ####application.js

app/assets/javascripts/application.js


//= require turbolinks # remove this line

Edit ###application.html.erb Remove 'data-turbolinks-track':'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 been disabled. You may be sure to disable it unless your site uses JS etc. a lot.

Like ready onload etc., This description allows you to load turbolinks without adaptation.

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

In addition, you can change the timing of adapting turbolinks. For more information, please click here. Take other life cycle events

I think this is the optimal solution this time, because 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 more effective usage, please comment!