Rails 4 turbo-link prevents jQuery scripts from working

by

$(document).ready(function(){ doesn’t really work with Turbolinks. Turbolinks:

… makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, it keeps the current page instance alive and replaces only the body and the title in the head.

So the page is only loaded once and then pieces are replaced as needed. Since the page is only loaded once, your $(document).ready() callbacks are only triggered when the site is initially visited, you won’t get more document-ready events when switching pages because Turbolinks doesn’t actually switch pages. From the fine manual:

With Turbolinks pages will change without a full reload, so you can’t rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.

You probably want to listen for one of the Turbolinks events instead:

  • page:change the page has been parsed and changed to the new version and on DOMContentLoaded
  • […]
  • page:load is fired at the end of the loading process.

page:change is usually what you’re looking for as it is triggered when loading a fresh page and restoring a page from the Turbolinks page cache.

You might want to turn off Turbolinks until you’ve had time to review all of your JavaScript and you’ve done a full QA sweep. You should also test your site’s speed to see if it is worth using at all.

Another option would be to use jquery.turbolinks to patch up things for you. I haven’t used this but other people are using it to good effect.

More Related Contents:

  1. Rails 4: how to use $(document).ready() with turbo-links
  2. Rails 5: how to use $(document).ready() with turbo-links
  3. Problems downloading big file(max 15 mb) on google chrome
  4. How do I check if an element is hidden in jQuery?
  5. How to check whether a string contains a substring in JavaScript?
  6. Get palindrome length from string [closed]
  7. Graphical bar presentation using jquery [closed]
  8. How does data binding work in AngularJS?
  9. Short circuit Array.forEach like calling break
  10. How can I select an element by name with jQuery?
  11. jQuery disable/enable submit button
  12. jQuery object and DOM element
  13. How do you clone an array of objects in JavaScript?
  14. How to resolve the C:\fakepath?
  15. Is there a way to return a list of all the image file names from a folder using only Javascript?
  16. JavaScript getElementByID() not working [duplicate]
  17. Is a JavaScript array index a string or an integer?
  18. Can I construct a JavaScript object without using the new keyword?
  19. Defer Attribute (Chrome)
  20. jQuery.getScript alternative in native JavaScript
  21. Is there a JavaScript function that reduces a fraction
  22. Is there a ‘has focus’ in JavaScript (or jQuery)?
  23. How to detect when history.pushState and history.replaceState are used? [duplicate]
  24. ReactJs: Prevent multiple times button press
  25. How to use OR condition in a JavaScript IF statement?
  26. Animating Multiple Markers
  27. Spying on a constructor using Jasmine
  28. Call angularjs function using jquery/javascript
  29. JavaScript multithreading
  30. Explain ExtJS 4 event handling

Leave a Comment