jQuery未随Ruby on Rails一起加载

Question

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?

Answer 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.

Answer 2

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. – LSKoy

@LSKoy 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(); } 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();
}