CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
StickMaNX
StickMaNX

Reputation: 1982

Rails, javascript not loading after clicking through link_to helper

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!

Upvotes: 80

Views: 35370

Answers (8)

MD Shahid Khan
MD Shahid Khan

Reputation: 806

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 } %>

Upvotes: -1

Rockwell Rice
Rockwell Rice

Reputation: 3002

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 .

Upvotes: 0

Ryan Endacott
Ryan Endacott

Reputation: 9172

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);

Upvotes: 142

user000001
user000001

Reputation: 33327

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

Upvotes: 25

pyepye
pyepye

Reputation: 156

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.

Upvotes: 3

poorman
poorman

Reputation: 120

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

Upvotes: 3

equn
equn

Reputation: 73

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

Upvotes: 5

Ice-Blaze
Ice-Blaze

Reputation: 897

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 %>

Upvotes: 66

Related Questions