80

I'm having some trouble loading my javascript when I use a link_to helper in rails. When I either manually enter the url with 'localhost:3000/products/new' or reload the page, the javascript loads, but when I go through a link as written below, the jQuery $(document).ready will not load on the new page.

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

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

products.js file

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

Any help would be much appreciated. Thanks in advance!

8 Answers 8

142

Are you using Rails 4? (Find out by doing rails -v in your console)

This issue is probably due to the newly added Turbolinks gem. It makes your application behave like a single page JavaScript application. It has a few benefits (it's faster), but it unfortunately breaks some existing events like $(document).ready() because the page is never reloaded. That would explain why the JavaScript works when you directly load the URL, but not when you navigate to it through a link_to.

Here's a RailsCast about Turbolinks.

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

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

Alternatively, you could do something like this for compatibility with regular page loads as well as Turbolinks:

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

If you are using 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); 
7
  • Yes, this is Rails 4. What you posted does fix it through link_to clicks. It also makes it not work on regular manual url page loads, is there a way to make it work through both methods without duplicating my js code? Thanks!
    – StickMaNX
    Jul 11, 2013 at 18:00
  • 1
    Hmm, that's odd. I would think it would work for both. The best solution is to probably use the linked jquery.turbolinks gem, because it probably handles that as well. Note: I haven't used it so I'm not certain. It looks like it rebinds 'page:load' to call $(document).ready() though, so you would just do everything as normal. Jul 11, 2013 at 18:01
  • I edited my answer to make a solution that should work without jquery.turbolinks :) Jul 11, 2013 at 18:05
  • Editing all the code in every js file, which expects document.ready to work as it always has, is not an option for an app of any size and complexity. Why would someone design something that makes document.ready not work as it always has, and call that a feature? Is there a way to just tell turbolinks not to break document.ready - or is the only option to uninstall it?
    – JosephK
    Oct 6, 2016 at 5:18
  • It is a pretty unfortunate change. I'm not sure why they decided to break such common behavior. I believe you can just use jquery.turbolinks as a drop-in fix though, and everything will work normally. Oct 11, 2016 at 21:09
66

I got the same probleme but jquery.turbolinks doesn't helped. I noticed that I have to override the GET method.

There is my sample :

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>
5
  • 2
    This was the fastest solution to implement. Sep 15, 2015 at 16:20
  • 1
    This solved the problem for that link_to but turns out the real issue was an inline <script> tag in the footer of the page. (Inline script tags are bad with turbolinks).
    – poorman
    Nov 11, 2015 at 18:20
  • 1
    The best solution is to remove turbolinks, imo. Fixing things that should "just work" with "work-arounds" is a huge time-killer. I could have taken a week off last year from turbolinks-fixes, alone.
    – JosephK
    Oct 6, 2016 at 4:52
  • 1
    this made my day !
    – user2094540
    Oct 3, 2017 at 12:33
  • Good answer for fast-fix, but for an optimal solution see the answer of @RyanEndacott
    – dimpiax
    Mar 3, 2019 at 22:26
25

If you are on rails 5 instead of 'page:change' you should use 'turbolinks:load' like this:

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

Source: https://stackoverflow.com/a/36110790

1
  • This and Ice-Blaze's solution both worked for me. But I like this best since I don't have to change all my links. (I am using Rails 5)
    – Sean
    May 14, 2017 at 4:03
5

You can also wrap your link with a div that specifies data-no-turbolink.

Example:

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

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

0
3

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

3

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

page:load has a caveat that it doesn't fire on cache reloads...

A new body element has been loaded into the DOM. Does not fire on partial replacement or when a page is restored from cache, so as not to fire twice on the same body.

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

1
  • Winner! page:load was not working for me on refreshes; I recommend this solution.
    – TJ Biddle
    May 4, 2016 at 10:12
0

The solution that solved my issue was adding this meta property.

<meta name="turbolinks-visit-control" content="reload">

This ensures visits to a certain page will always trigger a full reload.

This was incredibly useful for working on a solution to solve the issue I was having with this, https://github.com/turbolinks/turbolinks#reloading-when-assets-change .

-1

If your link_to js is working after reload so it should be a turbolink issue, you can use turbolink false on that link_to like for ex:

<%= link_to "Home", home_path, data: { turbolinks: false } %>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.