1

I am new to web development. As the title states, I have been having an issue with my JS in Heroku. I am using ruby on rails 5.1 and when I push my project to Heroku master everything is working fine but the JavaScript. I have been googling this for the last 2 days. I have tried organizing the //= require etcetc, have tried modifying my code, have tried changing config.assets.compile = false to true and have tried like 4 to 5 different results here in StackOverflow, like(Javascript features work on localhost but not when deployed to Heroku). Really don't know what else can I do. Here is my application.js

//= require jquery
//= require rails-ujs
//= require turbolinks
//= require jquery.easing
//= require bootstrap-sprockets
//= require creative
//= require_tree .

$(document).on('turbolinks:load', function() {
// Offset for Main Navigation
$('#mainNav').affix({
    offset: {
    top: 50
}
});

$("#button-transform").click(function() {
  $('.transform').toggleClass('transform-active');
});

window.setTimeout(function() {
$("#flash").fadeTo(2500, 0).slideUp(1750, function() 
{
    $(this).remove();
});
}, 3000);

});

Please let me know if you need more info.

Thanks

Yves Ramos
  • 43
  • 1
  • 8
  • So far I have tried what @Chris told me with the $(document).ready(function() {});. The Same issue. Works on the localhost server but not in Heroku. Tried rearranging the //= requires again, the same result. Tried doing putting all the JS in a separate file and also in application but it does not work. Have gone back and forward on google with no results. I also followed the guide in GitHub for the turbolink, nothing yet. Getting frustrated now. Any other suggestions. Thanks. – Yves Ramos Aug 16 '17 at 04:27

3 Answers3

3

I managed to solve my problem. Eventually, after hours of research, I gave up about this issue and start doing some CSS style. When I tried to push the new CSS to Heroku I had the same issue. Not showing the updated CSS in Heroku. Again, did some research and found this;

bundle exec rake assets:precompile

At first, it did not work for me. It was saying that I needed to install yarnpkg, which I had already. So, did some more research and finally notice that I was not able to do the bundle exec rake assets:precompile because I was in a branch repository and not the master. Did a checkout to the master, ran the command again, checked the CSS and it was working. as well as the JQuery. To answer my question, 

bundle exec rake assets:precompile

was the command that helped me.

The steps are

bundle exec rake assets:precompile
git add --all
git commit -m "some message"
git push heroku master
Yves Ramos
  • 43
  • 1
  • 8
2

I know it's been quite some time since this was posted but the fix for me was simple.

Instead of using this to import jquery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>`

You will need to do this:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>`

That is because Heroku requires a safe connection that means an https one and not http.

rmlockerd
  • 3,776
  • 2
  • 15
  • 25
Giannis Giannoulakos
  • 101
  • 1
  • 3
0

jQuery Turbolinks doesn't support ready events bound via $(document).on('ready', function). Instead, use $(document).ready(function) or $(function).

This will not work:

$(document).on('ready', function () { /* ... */ });

These two are guaranteed to work:

$(document).ready(function () { /* ... */ });
$(function () { /* ... */ });
ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
Ravi Kiran
  • 1
  • 2
  • Hi, thanks for the response. I am new to JS. When you say $(document).on('ready', function () { /* ... */ }); you are refering to $(document).on('turbolinks:load', function() {}? – Yves Ramos Aug 15 '17 at 19:12