Compiled Javascript not Working in Production Mode

Question

I am building an app on my local machine. When I precompile and run it in production mode, the compiled javascript stops working. Specifically, I have javascript in one coffeescript file and application.js, both in the assets folder. All other javascript (ie jquery in ajax forms, etc) continues to work, which is why I think it must have to do with compilation.

Here is my application.js file:

//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require jquery-ui/dialog
//= require autocomplete-rails
//= require dresssed
//= require raphael
//= require morris
//= require best_in_place
//= require_tree .

$('.label-stock-health').popover({ html : true});

$(document).keypress(function(e) {
    if ($('.search-bar').length){
      if($(".search-bar").is(":visible")) {

      } else {
        $(".search-bar").show();
        $("#q_name_cont").focus();
      }
    }

});

$("#spinner").hide();

$(document).ajaxStart(function() {
    $("#spinner").fadeIn('slow');
  }).ajaxStop(function() {
      $("#spinner").hide();
  });

$(document).ready(function() {
        $(".show-search").click(function(){
        if ($('.search-bar').length){
            $(".search-bar").toggle();
          }
        });
        $(".best_in_place").best_in_place();
});

This functionality still works in development mode. Additionally, if I hard code the javascript into my layout template, it will work. But without the hardcoding, it does not.

Any advice on what might be the culprit? If not , what is the best way to go about debugging this?

UPDATE #1 The only two errors I am seeing in the Javascript console of Chrome developer tools are posted below. They also show on my localhost development instance, where my javascript functionality is working in full.

Uncaught Google Maps API is required. Please register the following JavaScript library http://maps.google.com/maps/api/js?sensor=true.(anonymous function) @ application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9t.(anonymous function) @ application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9(anonymous function) @ application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9 variants:565 GET http://www.example.com/bootstrap/glyphicons-halflings-regular.woff2 404 (Not Found)

Answer 1

I did wrote to you in upwork.com how ever here it is... If it is working in local host but when uploaded online stops working than it is permissions problem. I have encounter same problems in godady and blue host. Try playing with permissions. For (on blue host) worked permissions to be set at 5 5 4. or 5 5 5 I did not remember correctly. How ever delete all and reupload with new permissions once you figure out what they should be.

Answer 2

The culprit here is the popover line, you will need to include the popover plugin if you want to use it. Comment it out and deploy your code, it will start working again.

Answer 3

I've just sent you a message on upwork as well, but you should check if removing turbolinks from your application.js files resolves the issue:

 //= require jquery
 //= require jquery_ujs
 //= require turbolinks ** remove this line as turbolinks interferes with javascript occasionally.
 //= require_tree .

Answer 4

Please include another file name custom.js and updated

$(document).ajaxStart(function() {
       $("#spinner").fadeIn('slow');
 });
$(document).ajaxStop(function() {
     $("#spinner").hide();
 });