JS, JQuery not working with heroku

Question

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

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
– Yves Ramos, Commented Aug 16, 2017 at 4:27

Yves Ramos · Accepted Answer · 2017-08-17 16:22:59Z

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

answered Aug 17, 2017 at 16:22

Yves Ramos

431 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nourza Over a year ago

The best answer ever! I spent 2 days trying to fix it

rmlockerd · Accepted Answer · 2021-07-30 20:53:24Z

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.

edited Jul 30, 2021 at 20:53

rmlockerd

4,1462 gold badges21 silver badges28 bronze badges

answered Jul 30, 2021 at 14:24

Giannis Giannoulakos

1011 silver badge5 bronze badges

Comments

Chris · Accepted Answer · 2017-08-15 20:18:43Z

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 () { /* ... */ });

edited Aug 15, 2017 at 20:18

Chris

139k139 gold badges316 silver badges293 bronze badges

answered Aug 15, 2017 at 18:52

Ravi Kiran

12 bronze badges

1 Comment

Yves Ramos Over a year ago

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() {}?

Collectives™ on Stack Overflow

JS, JQuery not working with heroku

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related