Code in application.js not loading in Rails

Question

I just launched my web service and just found out that my application.js is not working...

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

$("body").on('click', 'ul#invite_links li#invite_link_facebook a', function () {
  var url = $(location).attr('href');
    FB.ui({
    method: 'send',
    link: url
  });
});

$("body").on('click', '#facebook_friends button', function () {
  var receiver_name = $(this).find(".facebook-friend-name").text();
  var receiver_img = $(this).find(".facebook-friend-avatar   img").attr("src");
  $("#facebook_avatar").val(receiver_img);
  $("#collaborator_user_account").val(receiver_name);
  $("#collaborator_user_account").attr("readonly", "readonly");
  $("#collaborator_job_name").focus();
});

$("body").on('click', '#modal-close', function () {
  $(".modal").hide();
});

$(document).ready(function() {
  $('.notice').stop().animate({'marginTop':'-30'},850).delay(3000).slideUp(500);
});

This should be working when user access work page and try to add collaborator through searching friends in facebook. example here

Answer 1

It is so because you are not requiring the current file itself. Following is how would you do so:

//= require_self

Please note that //= require_tree . does load the current tree/directory, but it doesn't load the code in the file: application.js itself.

Edit: If still your code doesn't work, you have to have your JS code inside $(document).ready callback so that it gets executed when all the other asset files load properly.

Answer 2

I had a similar problem, and in my case all I had to do was run yarn build --watch