Rails, javascript does not load after clicking link_to

Question

I am having trouble loading my javascript when I use link_to helper in rails. When I either manually enter the url with "localhost: 3000 / products / new" or load the page, download javascript, but when I look at the link as below, jQuery $(document).ready will not load on a new page.

Link_to, javascript does not load when I click this link:

 <%= link_to "New Product", new_product_path %> 

product.js file

 $(document).ready(function() { alert("test"); }); 

Any help would be greatly appreciated. Thanks in advance!

Answer 1

Do you use Rails 4? (Find out by running rails -v in the console)

This issue is probably related to the recently added Turbolinks gem. This makes your application behave like a one-page JavaScript application. It has several advantages ( faster) , but unfortunately it breaks up some existing events, such as $(document).ready() , because the page never reloads. This explains why JavaScript works when you directly load the URL, but not when you go to it via link_to .

Here's the RailsCast about Turbolinks.

There are several solutions. You can use jquery.turbolinks as a fix to delete, or you can switch the $(document).ready() statement, use the Turbolinks 'page:change' event instead:

 $(document).on('page:change', function() { // your stuff here }); 

Alternatively, you can do something similar for compatibility with regular page loads, as well as with Turbolinks:

 var ready = function() { // do stuff here. }; $(document).ready(ready); $(document).on('page:change', ready); 

If you use Ruby on Rails> 5 (you can check by running rails -v in the console), use 'turbolinks:load' instead of 'page:change'

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

Answer 2

I have the same problem, but jquery.turbolinks did not help. I noticed that I need to override the GET method.

There is my example:

 <%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %> 

Answer 3

If you use rails 5 instead of 'page:change' , you should use 'turbolinks:load' as follows:

 $(document).on('turbolinks:load', function() { // Should be called at each visit }) 

Source: stack overflow

Answer 4

You can also wrap your link with a div that indicates a lack of turbolink data.

Example:

 <div id="some-div" data-no-turbolink> <a href="/">Home (without Turbolinks)</a> </div> 

Source: https://github.com/rails/turbolinks

Answer 5

Make sure you don't have inline <script> tags. (Inline script tags are bad with turbolinks).

Answer 6

FWIW, from Turbolinks docs , a more appropriate capture event instead of $(document).ready is page:change .

page:load has the caveat that it does not work when the cache is reloaded ...

A new body element is loaded in the DOM. It does not start during partial replacement or when the page is restored from the cache, so as not to run twice in the same body.

And since Turbolinks just switches the view, page:change is more appropriate.