0

I'am having trouble by loading a Javascript file (which includes jQuery) in Ruby on Rails. 

$(document).ready(main);

var contador = 1;

function main(){
  $('.menu_bar').click(function(){

    if(contador == 1){
      $('nav').animate({
        left: '0'
      });
      contador = 0;
     } else {
        contador = 1;
        $('nav').animate({
          left: '-100%'
        });
       }
    });
  };

The proper html.erb looks like this: 

<header>
  <div class="menu_bar">
    <a href="#" class="bt-menu"><span class="fa fa-bars"></span>Brand</a>
  </div>
  <nav>
    <ul>
      <li><%= link_to "Link 1", '#'%></li>
      <li><%= link_to "Link 2", '#'%></li>
      <li><%= link_to "Link 3", '#'%></li>
    </ul>
  </nav>
</header>

The proper application.js includes:

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require jquery_ujs
//= require_tree .

jquery is sourced in the Gemfile with gem 'jquery-rails'.

The animation is not loading after clicking. I am using Rails 5 and I guess the problem is issued by Turbolinks.

What do I have to change to solve this problem?

Improve this question
6
  • 1
    If you think the problem is turbolinks, try doing $('.menu_bar').on('click', function() { ... instead of $('.menu_bar').click(function(){ .... Are you getting any errors in the console? Commented Oct 30, 2017 at 1:02
  • Thanks for your answer. It doesn't solve it and I get no errors in the console. Commented Oct 30, 2017 at 1:06
  • If you're not getting any error in the console jQuery is loading (otherwise you'd see something like "ready is undefined"). The error might be something else in your code (possibly in your CSS) - the code itself seems to work: jsfiddle.net/jzghgzot maybe try adding $('nav').css('position', 'relative'); in the main(). (you can also try to share more info, like the HTML, JS and CSS) Commented Oct 30, 2017 at 1:13
  • I've tried adding $('nav').css('position', 'relative'); but it doesn't work. The html.erb is edited in the description. The CSS is working fine: jsfiddle.net/wy6fxoaj. Commented Oct 30, 2017 at 1:51
  • add console.log('abc') in your main function and see if it's called correctly, if not working at that time, Try $(document).ready(main); $(document).on('turbolinks:load', main); to your javascript file Commented Oct 30, 2017 at 2:22

2 Answers 2

Reset to default
1

Turbolinks tries to follow every link (even if it's a #, in which case it just reloads the page). You have a few ways around this.

Option 1: Change your link to not have any href:

<div class="menu_bar">
  <a class="bt-menu"><span class="fa fa-bars"></span>Brand</a>
</div>

Option 2: Stop the event from propagating, so that it doesn't reach turbolinks:

$('.menu_bar a').click(function(e) {
  e.preventDefault();
  console.log("I HAVE BEEN CLICKED");
  // Rest of code here...
  return false;
});

Option 3: "Tell" turbolinks not to follow # links:

$(document).on('turbolinks:click', function (event) {
  if (event.target.getAttribute('href').charAt(0) === '#') {
    return event.preventDefault();
  }
});

If it doesn't work, add a few console.log within the code to find out which part it's not getting to. There might be some issues with the CSS (which is not shared so we can't help there), but it might require a relative or absolute position to move the nav.

Hopefully this sets you in the right direction, let me know if it doesn't work and what have you found out after debugging, and I'll update my answer.

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

1 Comment

Perfect! Thank you very much.
0

do like this, remove rails-ujs, require turbolink at last and require before turbolinks one by one all your files. Do not use require .

//= require jquery
//= require jquery_ujs
//= require each one of your files on the order you want to load the !!!
//= require turbolinks

Then include the js load function with this code

$(document).on('turbolinks:load', function() {
    main();
}

function main(){
    // Include your code
    };

Other question is, did you set a breakpoint inside this function and made sure it is not being called?

$('.menu_bar').click(function(){
       // breakpoint
});

Yes, console.log('abc') is called correctly. – L.S.Koy

@L.S.Koy you are wrong. If you have turbolinks working console.log will not be called correctly. The $(document).ready(main) function will only call the main() function on full page refresh, because turbolinks caches the pages so when you click a link it does not do a full page refresh, so your $(document).ready does not run. This means that if you click a link, your $(document).ready does not run and does not execute function() { main(); } which includes the js code you want to run

to make correctly execute your js code on all turbolinks events you need to use 

$(document).on('turbolinks:load', function() {
    main();
}
Improve this answer

3 Comments

I've tried like you said but it doesn't work. When I add console.log('abc') after $('.menu_bar').click(function() {... "abc" is definitely shown in the console after clicking. Another thing that I tried: If I remove //= require turbolinks and rechange the js load function to $(document).ready(main); it suddenly works fine. But why does it not work with turbolinks?
@L.S.Koy You are NOT TRIGGERING THE PAGE CHANGE. That is why your click works. Because turbolinks breaks you link if you change page and do not refresh the page. I am right. Do you believe me?
Of course I believe you, but I don't understand why it's still not working with turbolinks. I also tried this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.