We Keep Coding

Rails 5 - JS not working in production environment (only)

I am struggling.
I have rails 5 app with a series of js files in my app/assets/javascripts folder. The js in those files works just fine in the development environment, but when I publish on heroku, it stops working.
I can see from the chrome inspector, that the application.js file that is visible from the network tab shows the content of the js files in my app. That js just doesnt seem to do anything in production. No console errors appear from the chrome console inpsector.
I can see from this post that there are a series of things to try. I've tried all of them. I've even made a completely new app and added the js files on at a time to see if there is a tipping point where something is required in a different order to something else (mostly guessing) - but that does nothing to fix the problem.
I can see from this article that one suggestion is to:
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
and then try:
rake assets:clean assets:precompile
I've tried each of these suggestions and still can't find the problem.
If there were an error in the way I've written the js, I would expect that to be exposed in both my development and production environment console inspectors in chrome. There are no errors showing in either environment.
If there were a problem with the production environment reading the js file, I'm confused about why I can word search for the words used in the js file in the file I can open from the network tab and see the correct text.
How do I go about solving this problem?
My relevant files are:
app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-fileupload/vendor/jquery.ui.widget
//= require jquery-fileupload/jquery.iframe-transport
//= require jquery-fileupload/jquery.fileupload
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
// require underscore
// require gmaps/google
//= require markerclusterer
//= require cocoon
//= require cable
//= require_tree .
config/initializers/assets.rb
# Be sure to restart your server when you modify this file.
# Version of your assets, change this if you want to expire all your assets.
Rails.application.config.assets.version = '1.0'
# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# Rails.application.config.assets.precompile += %w( search.js )
config/production.rb
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
The relevant file that is not working in the production environment is saved in app/assets/javscripts/stance/commercial.js (so it should be identified in application.js by //= require_tree.
That file has:
jQuery(document).ready(function() {
jQuery('[name="organisation[commercial_attributes][standard_financial_split]"]').on('click', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden');
} else {
jQuery('#commercial_standard_financial_split_content').removeClass('hidden').addClass('hidden');
}
});
});
Can anyone help with a process for getting js to work in the production environment?
I am out of suggestions for things to try and this isn't the sort of thing that the tutorials, code schools (I am a student in code school, go rails, udemy and have a million books), but can't find an reference point from which to start in solving this problem.

For me, the solution was to remove the javascript include tag from the header of my application.html.erb to beneath the body. That fixed the problem with the js file I referenced in my question.
However, this has now broken my google maps javascript, so I'm not sure that this is actually a good solution.

Rails AutoComplete, not working on Heroku?

Okay, so I installed this gem:
https://github.com/bigtunacan/rails-jquery-autocomplete
And configured it and it works really well, I even used the CSS from one their examples on my web app for autocompletion and it works locally.
Problem was after I pushed to github, I tried pushing to heroku and heroku kept aborting rake assets compilation because of invalid punc. My application.js file is really small and I don't see any errors :/
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require bootstrap-sprockets
//= require highlight.pack
//= require turbolinks
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.search-query').bind('railsAutocomplete.select', function(event, data {
$('.search-me').trigger('click')
});
});
jQuery(function($) {
$("tr[data-link]").click(function() {
window.location = this.dataset.link
});
I do have other coffeescript files but those are all empty execept for one listings.coffee
$(document).ready(ready);
$(document).on('page:load', ready);
But I don't think this is causing a problem either.
I've been trying for a week to get autocomplete to work, so I've tried adding multiple libraries and css files to go with them, could that possibly be the problem?
EDIT: If anyone needs to know the site, it's rpastie.xyz ( it's just like a pastebin ) and here's my github repo for it: https://github.com/ilovemysillybanana/pastie I just noticed my repo says it's 72% javascript now because of that library I added, it's huge.
EDIT:
The error I get when I checked the javascript developer console is this:
application.self-1a1712b70bebadf78204351833a15e6960033fd69d5422f3985a59622371194‌​2.js:30 Uncaught SyntaxError: Unexpected token {
I assume this means there's an issue on line 30, I've checked but it looks fine to me I don't really understand it.
http://pastebin.com/T1bXxMcy I put it on pastebin, but only a small part of it(only first 50 or so lines, most are comments or white space).
I'm using the free tier of Heroku, if anyone is wondering. I definitely want to undo the last commit I did but I really don't wanna mess things up worse it added all the assets to git and heroku and now the project is huge.

Compiled Javascript not Working in Production Mode

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 (i.e. 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)

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.

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.

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 .

Please include another file name custom.js and updated
$(document).ajaxStart(function() {
$("#spinner").fadeIn('slow');
});
$(document).ajaxStop(function() {
$("#spinner").hide();
});

Adding a jQuery Plugin into a Ruby on Rails App

I'm working on a website that uses HTML, CSS, and JavaScript with jQuery plugins. In order to make the website more dynamic, I shifted my code to Ruby on Rails. The HTML and CSS are fine, but some of the jQuery plugins that I had working before aren't functioning anymore.
I tried multiple ways to fix this. I first added the javascript files into app/assets/javascripts and then added //= require pluginfilename in application.js and then <%= javascript_include_tag name..... %> but that didn't work.
Is there something that I'm missing or doing wrong? I'm fairly new to Rails. This is version 4.2.3 btw.
Edit: this is my application.js file
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require countdown
//= require grid
//= require custom
//= require script
//= require_tree .

First thing I would do would be to try and find a version of the plugin that's distributed via CDN, then including it via <%= javascript_include_tag link %>.
Barring that...
Did you do a //= require pluginfilename without the extension? Can you paste in your application.js file so we can take a look?
Also, what errors are you getting your JS console? Are you ensuring that the plugin is being loaded before it's being used? (Load order in the application.js file matters.)

You can find a bridge between Bower and Rails with Rails-Assets.org. I've used this for several projects and it works nicely. If your plugins are using bower, they should exist on Rails-Assets.org

Rails can't include AngularJS

I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.

I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)

After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.

in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work

In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.