Ruby on Rails pages are initially empty, but load correctly when updated
- http://do.starterpad.com - home page loads fine
- Try clicking any footer link (Contact, Starters, Startups, etc.) and notice that the page is not loading
- Press F5 or the reload button in your browser and note that it is loading now.
This is pretty weird. Any ideas?
I should also point out that it works great on our local development machine and not on a real site.
source to share
The problem is almost certainly related to Turbolinks
A typical definition of a Turbolinks problem is that if it only happens when the links are clicked (IE "not on updating"), it will be caused by Turboinks. I'll explain why in a minute, but first, let's see what the problem is:
Mistake
I clicked on the footer links and the page turned around.
Interestingly, it showed me that the <body>
page element was removed:
This is almost certainly a Turbolinks bug (as I will explain below). So what caused it?
There may be several reasons, but one of them is the fact that you added the tag <script>
directly to your element <body>
:
I believe this could be a problem. Either that, or it wouldn't have finished your tag </body>
correctly, would call Turbolinks. The way to allow this would be to make your Javascript unobtrusive , allowing you to make sure you have all your tags
So, how would I fix this:
-
Fix
First, put your Javascript in asset pipeline
:
#app/assets/javascripts/application.js
//Pikwik
var pikwik = function() {
var pkBaseURL = (("https:" == document.location.protocol) ? "https://statsbox.info/" : "http://statsbox.info/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 25);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
};
$(document).on("page:load ready", pikwik);
Apologies for the confusion of JQuery and JS - I thought it right to emphasize the fact that you only need to save it on load at the beginning of the request. Looking at the PikWik code itself, it will add a tag script
to your page, which means that if you want it to work with Turbolinks, it must be done at the very beginning of the page load process.
This will be because you closed the tag correctly </body>
Turbolinks
To give you an idea of why Turbolinks has a problem, you will want to consider how it works:
Turbolinks executes the following links faster in your web application. Rather than letting the browser recompile JavaScript and CSS between each page change, it keeps the current instance of the page alive and only replaces the body and heading in the head. Think CGI vs an ongoing process.
This basically means that every time you load a page with Turbolinks, it only loads the <body>
new page tag , leaving it <head>
intact.
The problem is that if you have any dynamic scripts inside whatever tag <body>
you want to load it will cause a conflict. This is what I think happened here - which you can solve with the above recommendation.
source to share