I'm using Webpacker with Rails 6. The turbolinks:load event is working properly locally but not when deployed to Heroku. I'm using the standard jquery $(document)on.('turbolinks:load' ()=>{}) by importing a 'ready.js' file into my application folder. Adding a console log inside the event handler works on my computer but not on the deployed application.
I'm pasting the code to my application.js, file inside the packs folder. application.html.erb form the layouts folder and ready.js file. I have zero idea as to why this is not working. I've been messing with it for about a week with no success. I've already tried to just have the turbolinks:load event listener in the application.js file. I have also just tried doing a simple console.log with no other code to make sure that nothing else might be braking the code. Even the simplest case is still not working. I have also purged the cache from my site which is sitting behind cloudflare and purged the build cache from Heroku.
I would really appreciate any help. My next steps are just going to be to not use turbolinks if I keep having issues which is not something I want to do.
aplication.html.erb:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160236437-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-160236437-1');
</script>
<%if content_for?(:title)%>
<title>ᐈ <%= yield(:title) %></title>
<%else%>
<title> Home On Call | Quality Local Contractors</title>
<%end%>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', :defer => "defer" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= "<link rel='canonical' href='#{yield(:canonical)}'/>".html_safe if content_for?(:canonical)%>
<meta name="description" content="<%=yield(:meta_description)%>"/>
<meta name="robots" content="<%=yield(:robots)%>"/>
<meta property="og:title" content="<%=yield(:og_title)%>"/>
<meta property="og:description" content="<%=yield(:og_description)%>"/>
<meta property='og:image' content="<%=yield(:og_image)%>"/>
<meta property="og:url" content="<%=request.url%>"/>
<meta property="og:site_name" content="Home On Call" />
<meta property="og:type" content="business.business"/>
<meta property="business:contact_data:locality" content="<%=yield(:locality_town)%>"/>
<meta property="business:contact_data:region" content="<%=yield(:locality_state)%>"/>
<%# <meta property="business:contact_data:postal_code" content="07604"/> %>
<meta property="business:contact_data:country_name" content="USA"/>
<meta property="business:contact_data:website" content="https://www.homeoncall.com/"/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%=yield(:title)%>"/>
<meta name="twitter:description" content="<%=yield(:meta_description)%>" />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= favicon_link_tag 'favicon/favicon.ico' %>
<%= favicon_link_tag "favicon/apple-touch-icon.png", rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag "favicon/android-chrome-192x192.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "192x192" %>
<%= favicon_link_tag "favicon/android-chrome-512x512.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "512x512" %>
<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "Organization",
"name" : "HomeOnCall",
"alternateName" : "Home On Call",
"url" : "https://www.homeoncall.com/",
"contactPoint": [
{ "@type": "ContactPoint",
"telephone": "+1-201-675-6069",
"contactType": "Customer Service"},
{"@type": "ContactPoint",
"email": "[email protected]",
"contactType": "Customer Service"}],
"sameAs" : [ "https://www.facebook.com/HomeOnCall"]
}
</script>
</head>
<body id="page-top">
<%= render "layouts/nav"%>
<%= render "layouts/flash"%>
<%= render "layouts/header"%>
<%= yield %>
<%= render "layouts/footer"%>
<%= render "layouts/admin"%>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" >
</body>
</html>
application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import './src/application.scss'
import './ready'
import fontawesome from './fontawesome'
fontawesome()
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
ready.js
import greyscale from './greyscale';
import easing from './easing';
console.log("OUTSIDE DOCUMENT READY")
$(document).on('ready turbolinks:load', function () {
console.log("INSIDE DOCUMENT READY")
greyscale();
easing();
// Multi Step Lead Form.
$("#next-1").click(function (e) {
e.preventDefault();
$("#second").show();
$("#first").hide();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
});
$("#next-2").click(function (e) {
e.preventDefault();
$("#third").show();
$("#second").hide();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#next-3").click(function (e) {
e.preventDefault();
$("#fourth").show();
$("#third").hide();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
$("#next-4").click(function (e) {
e.preventDefault();
$("#fifth").show();
$("#fourth").hide();
$("#progressBar").css("width", "100%");
$("#progressText").text("Step - 5");
});
$("#prev-2").click(function (e) {
e.preventDefault();
$("#second").hide();
$("#first").show();
$("#progressBar").css("width", "20%");
$("#progressText").text("Step - 1");
})
$("#prev-3").click(function (e) {
e.preventDefault();
$("#third").hide();
$("#second").show();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
})
$("#prev-4").click(function (e) {
e.preventDefault();
$("#fourth").hide();
$("#third").show();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#prev-5").click(function (e) {
e.preventDefault();
$("#fifth").hide();
$("#fourth").show();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
// Modal toggle
$('#myModal').modal();
// Show characters left for meta description.
$('#meta-word-text').keyup(function(e){
var numWords = $.trim($("#meta-word-text").val()).split("").length;
$('#meta-word-label').text(`Characters left ${120-numWords}`)
})
// FAQ Collapse
$(".collapsible-item").click(function(e){
$(e.target).siblings().toggle()
$(this).toggleClass("active")
})
});
So here is what was happeing:
When looking in the network tab the application pack was loaded asynchronously by Rocket loader( A Cloudflare tool to speed up JS).
When a link was clicked turbolinks did the xhr call and it worked for a brief moment before rocket loader kicked in. Removing the rocket loader script from the bottom of the site sort of fixed it, although the application pack then wasn't getting loaded properly.
The problem was with Cloudflare's Rocketloader and Turbolinks. I disabled rocket loader in the Cloudflare dashboard following this link (https://docs.deadlinefunnel.com/en/articles/4160226-how-to-disable-cloudflare-rocket-loader) and all was well with in the world.
A big shout out to my friend Steffan H that found the root source of this problem.
Lesson learned. Don't go clicking every button you see on Cloudflare with the promise of speeding up your site without thoroughly testing what happens first.