Rails, javascript not loading after clicking through link_to helper

by

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

More Related Contents:

  1. Find DOM element by ID when ID contains square brackets?
  2. Facebook how to check if user has liked page and show content?
  3. Rails 5: how to use $(document).ready() with turbo-links
  4. How can I change the title of the document during .ready()?
  5. Rails flash notice via ajax
  6. Detect browser character support in javascript?
  7. .js.erb VS .js
  8. How to hide css and js version details from weppalyzer in PHP
  9. How do I prevent a parent’s onclick event from firing when a child anchor is clicked?
  10. How to reset a form using jQuery with .reset() method
  11. How to reload current page without losing any form data?
  12. Difference between jQuery `click`, `bind`, `live`, `delegate`, `trigger` and `on` functions (with an example)?
  13. Uncaught TypeError: Cannot read property ‘msie’ of undefined – jQuery tools
  14. How to pass parameters in GET requests with jQuery
  15. How do I synchronize the scroll position of two divs?
  16. jquery: what does “$(this)” exactly mean?
  17. Can I use javascript to dynamically change a video’s source?
  18. Using Jquery Datatable with AngularJs
  19. jQuery – Can threads/asynchronous be done?
  20. Use JSONP to load an html page
  21. Bootstrap 4 multiselect dropdown
  22. smooth auto scroll by using javascript
  23. How to get the html of a div on another page with jQuery ajax?
  24. Detect if an alert or confirm is displayed on a page
  25. jQuery Standards and Best Practice [closed]
  26. How do I refresh a DIV content?
  27. showing progressbar progress with ajax request
  28. Trigger events when the window is scrolled to certain positions
  29. Get content of span
  30. how to use html2canvas and jspdf to export to pdf in a proper and simple way

Leave a Comment