After I've precompiled assets and uploaded them to CDN I decided to turn on turbolinks. They were kind of turned on before when I were precompiling assets, that is I had gem turbolinks in Gemfile and require turbolinks in application.js but in application.html I had data-no-turbolink instead of data-turbolinks-track" => true.
Now I change it to data-no-turbolink to data-turbolinks-track" => true and expect them to work in production on the my local machine but it seems they aren't. Visually it seems they aren't working and "initiator" in the browser isn't turbolinks.
I don't want to recompile the assets if it's not really needed because reuploading them to CDN takes a lot of time.
So do I have to recompile them? Or perhaps I just don't notice that they are really working already?
data-turbolinks-track is only for asset tracking (to make sure the loaded assets file is the latest). It does not affect whether Turbolinks is used for a particular link.
If turbolinks is installed, any internal link without data-no-turbolink will be loaded using Turbolinks UJS.
The following code will fire an alert if Turbolinks is running.
$(document).on('page:load', function(){ alert("Turbolinks is active"); });
Not easy with the sparse information you provide. But here are some notes worth considering:
About Turbolinks:
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 use jQuery? Read above link to understand. A good solution is this one: jQuery.turbolinks
...
But if you have a large codebase with lots of $(el).bind(...)
Turbolinks will surprise you. Most part of your JavaScripts will stop
working in usual way. It's because the nodes on which you bind events
no longer exist.
...
Related
I've read through the other available questions and answers and they don't solve my issue. I recently looked to remove turbolinks from my project because I was having problems setting up event listeners. Suggestions for modifying the jquery to use the turbolinks equivalents weren't working, so I decided to remove it entirely for now to unblock myself.
I've done the following:
Remove the gem from Gemfile
Bundle (confirmed in the bundle turbolinks is no longer listed)
Removed turbolinks attributes from links in the head
Removed the require from the application JS
Restored my JS file to the original jQuery implementation
However, the problem persists on production (Heroku). Everything continues to work locally. I was inspecting the source assets on production and noticed I can find traces of turbolinks in the compiled js file. I don't know if this is causing the problem and I don't know where it's coming from so I haven't been able to remove it to test.
My JS file is set up like so:
$(document).ready(function() {
console.log('Listener setup working...');
....
Any ideas greatly appreciated.
I've noticed recently, probably since installing Rails 5 that the local_time gem doesn't work properly on pages where the link was internal (through turbolinks). If the link to the page was external or the browser refreshed, or turbolinks is disabled, local_time works properly.
Does anyone know how to use these together?
I needed to initialize the local time on TurboLinks load. This event provides a chance to do those things that would have run at document ready. The JavaScript is:
document.addEventListener("turbolinks:load", function() {
LocalTime.run();
});
I see in my application.js file //= require turbolinks. I was wondering what turbolinks does in rails 5.0 because it is somehow getting in the way of my bootstrap buttons. Can someone please explain what turbolinks is and how i can fix my bootstrap problem?
Turbolinks is a gem that speeds up your app and makes it behave like a SPA (Single Page App), it does this by loading only the content between your body tags (using javascript) basically by making and AJAX request to the server, waiting the answer, deleting the old content and replacing it with the new content, handling the URL and browsing history.
For more info check https://github.com/turbolinks/turbolinks
Simple Explanation By Analagy:
Imagine you have a yellow page directory (a physical book directory). Every now and then, one or two phone numbers require updating. Rather than simply ordering an entirely new directory, you simply edit, within the directory itself, the phone numbers that need to be edited.
It's a LOT faster, and less expensive.
How do you know what numbers need to be edited? Well you'd make a phone call (AJAX request) and the yellow pages people will simply tell you that what certain few numbers need changing.
In other words, only the parts of the page which need changing will be changed with turbolinks. The problem with turbolinks is that it might not always be compatible with other javascript libraries out there.
I have two filter dropdowns on this site which will only trigger the first time I press them. According to my studies it seems that it has to do with turbolinks, which I've disabled by adding data-no-turbolink to the body tag like so:
<body data-no-turbolink>
...
</body>
I've also tried adding this to all of the dropdown links and the link to open the dropdown.
<a href="some-link" data-no-turbolink>...</a>
It seems to work on development, but when I push to Heroku, it seems turbolinks are running again. Any suggestions?
If Turbolinks is an issue, it can be removed entirely from the project by following the instructions provided e.g. here:
remove gem 'turbolinks' from the Gemfile and run bundle update
remove //= require turbolinks from app/assets/javascripts/application.js
remove "data-turbolinks-track" => true from the stylesheet and javascript tags in the header of application.html.erb layout file.
Quoting Rails 4 In Action:
...it's our opinion that Turoblinks is great to speed up
mostly-server-side sites, but as soon as you start writing some
JavaScript, it causes more problems than it's worth.
I'm trying to get pjax to work on a Rails app but none of the links are being annotated with pjax. I think pjax isn't really being loaded. I'm using pjax_rails and am basically following the railscast instructions but using //= require jquery.pjax instead of just pjax. I'm also using it with bootstrap which may cause an issue but I'm not sure. My other thought is that is that the pjax javascript isn't being loaded and I need to run something like $('a').pjax('[data-pjax-container]')
To be clear the main problem is that pjax isn't being loaded client side and thus when I make requests the X-PJAX header is not being set.
Finally got it working. First problem was that the unbeknownst to me the assests pipeline was turned off so the pjax javascript file wasn't being included. Instead I went with the pjax rack gem and dumped it into the public directory. Then I created a new javascript file with $('a').pjax('[data-pjax-container]') and it works! Although I'm not sure why I need to manually call that javascript when all the documentation seems to point to the fact that it should be already there.