jQuery works on Heroku, but not on Rails localhost

Question

I wrote some jQuery to target the list items (li) in my left nav bar. The jQuery works when I push the changes to Heroku, but the jQuery that I wrote doesn't work on the localhost. The effect that I'm aiming for is when the user mouses over the links in the nav bar, the links move to the right 2 em. I can't figure out why the jQuery works on the hosted site and not localhost. I have a feeling that it might have something to do with the application.js file. Any help would be greatly appreciated and thanks in advance!!!

// javascript assets
// = require jquery
// = require jquery_ujs
// = require turbolinks
// = require welcome.js
// = require_tree .

// the html
<div class="list-items">
      <ul>
        <li class="links"><%= link_to "Portfolio", portfolio_url %></li>
        <li class="links"><%= link_to "Tutorials", tutorials_url %></li>
        <li class="links"><%= link_to "Blog", blog_url %></li>
        <li class="links"><%= link_to "About Me", aboutme_url %></li>
      </ul>
</div>

// css for list items
.list-items {
    font-size: 1.5em;
    line-height: 2em;
    margin-left: -.20em;
}


// JS for hovering over the link
$(document).ready(function() {
  console.log("You are in the console right now!!");

  $(".links").on("mouseenter", function() {
    $(this).css("margin-left", "2em");
  });

  $(".links").on("mouseleave", function() {
    $(this).css("margin-left", "-0.05em");
  });
});

when you try to run on localhost, what is the error that you are facing? — Nirupa, Jun 10 '16 at 03:21
@Nirupa I don't get any errors when when I run it on localhost. Everything works fine except the JavaScript. — Piara Sandhu, Jun 10 '16 at 03:53

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

There's one thing that comes to mind here...

TurboLinks doesn't work well with

$(document).ready(function() {

Because when you navigate, Turbolinks doesn't reload the page. It's possible that on your local machine you are not seeing it work simply because of the way Turbolinks is loading the page. And in production perhaps you have navigated differently and the page has actually fired this event.

See Rails 4: how to use $(document).ready() with turbo-links for some details on this.

edited May 23 '17 at 12:31

Community

1
1

answered Jun 10 '16 at 03:27

Brian Hogan

3,033
21
18

I've used $(document).ready() with Rails before and I've never had any problems. It's been a while since I've used jQuery so I've kinda forgotten how to get it to play nice with Rails. – Piara Sandhu Jun 10 '16 at 03:52

jQuery works on Heroku, but not on Rails localhost

1 Answers1