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 5 compiled js code does not work on production only

I have a js code which should add a class to all images within an element with a class:
$(document).on('turbolinks:load', function() {
$('.blog-article img').addClass('img-fluid');
});
View where it should work looks like:
<div class="blog-article">
<p><img src="http://image_address..." alt=""></p>
</div>
in development environment it works perfect. But in production environment this code does not work although I can see it in assets using browser console:
$(document).on("turbolinks:load",function(){$(".blog-article img").addClass("img-fluid")});
Any ideas?
Thanks!
PS. application.js file:
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
$(document).on('turbolinks:load', function() {
$('.blog-article img').addClass('img-fluid');
});
PPS. And interesting moment - when I see in console in production, js code looks like this:
and it has extra spaces, so it might be the causing reason. But when I rename slass replacing - with _ or removing it or leaving just .article, it still has extra spaces in production:
.blog- article
.blog_ article
.blog article
. article
And I have everything correct in development (as described above).
And the interesting point - if I copy the code from console, these "extra spaces" disappear.

I see you're using bootstrap. Bootstrap 4 requires 'tether' to work without generating errors. And because compiled javascript is compressed to only one row, all javascript stops working if you get errors :)
Does it work better if you install Tether?
https://github.com/twbs/bootstrap-rubygem/blob/master/README.md#installation

I would recommend you initiating the .js.coffee as following
jQuery ($) ->
$(document).on "turbolinks:load", ->

Rails 4 jQuery conflicts with javascript

Im trying to make an app in Rails 4.
I'm struggling. I'm trying to incorporate a bootstrap theme and I'm getting issues with the vendor javascripts and the rest of the code.
I think the problem might have something to do with having jQuery in my application.js and then having vendor .js files which start with a '$' sign:
$.circleProgress = {
I've just read this: https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
My problem is though that I don't know how to make the changes that make the code safe.
Do I need to do a search for every '$' in the vendor files or otherwise how do i put a safe wrapper on jQuery - especially where it is incorporated through a gem.
Has anyone encountered these problems and figured out a solution? I'd love some help.
Application.js
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require underscore
//= require dependent-fields
//= require_tree .
//= require bootstrap-slider
$(document).ready(function() {
DependentFields.bind()
});
Related problem: Rails 4 - incorporating vendor assets
Observation
I've noticed that the console log of errors shows problems with .js files in my app/assets/javascripts folder.
They are the only other files in that folder (aside from application.js). My application.js has 'require_tree' so they will be compiled. But something I think might be conflicting in those files with (perhaps) the inclusion of jQuery in the application.js?
The log shows:
Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined
conversations.self-832ece2867c1701a5202459ab73ecd6432da2a6c833d8822d37025845a0aefcc.js:10 Uncaught TypeError: $ is not a function
organisations.self-6547f734e3a69b76176dfe5bb194e428c0bc560ad3fb69811dce9c7f8ccb9f4d.js:2 Uncaught TypeError: $ is not a function
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E Failed to load resource: the server responded with a status of 400 (Bad Request)
http://localhost:3000/profiles/assets/images/grayscale.svg#greyscale Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/profiles/assets/custom/images/preloader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1384 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
http://localhost:3000/assets/flaticon.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/flaticon.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a function
Each of the js folders that are identified as errors are saved as .js files in app/assets/javascripts.
Do I perhaps need to use a different file name (.js.erb / js.coffee)? to make this work. Alternatively, do I need to put script tags around the content of those files?
For example, the first file opens with:
$.circleProgress = {
// Default options (you may override them)
defaults: {
/**
* This is the only required option. It should be from 0.0 to 1.0
* #type {float}
*/
value: 0,
UPDATE
I think some part of my problem is to do with the files saved in app/assets/javascripts with ".js" extensions. Each of them shows in the console errors list as:
kwift.CHROME.min.js:1271Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54….js?body=1:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined(anonymous function) # circle-progress.self-f67ec54….js?body=1:9
conversations.self-832ece2….js?body=1:10 Uncaught TypeError: $ is not a function(anonymous function) # conversations.self-832ece2….js?body=1:10
organisations.self-6547f73….js?body=1:2 Uncaught TypeError: $ is not a function(anonymous function) # organisations.self-6547f73….js?body=1:2(anonymous function) # organisations.self-6547f73….js?body=1:6
projects.self-9c019ba….js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) # projects.self-9c019ba….js?body=1:1
main.self-5888479….js?body=1:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a functionwindow.onload # main.self-5888479….js?body=1:316
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared

It sounds like you have a lot of cleanup to do. Is this your first Rails app? If so I'm curious why you have so many JS files already. I would cut back your list to just a few, fix the problems that remain, and slowly start adding things and fixing problems as you go. That would be my general strategy. For each bug, go slow and double-check that you really understand the cause, before you slash here and there hoping for a fix.
Here are some tips for specific bugs I see:
This line will include all the .js files in app/assets/javascripts:
//= require_tree .
The problem is that you're already including them one-by-one above. So they are getting included twice. That's why you're getting warnings like 'findGoodContent' has already been declared. I know it is kind of nice to use require_tree (though I don't love it), so if you want to keep that, consider moving all the 3rd-party JS files out of app/assets/javascripts and into vendor/assets/javascripts. You can still require them in your application.js, but they won't get repeated by require_tree.
The 404 errors for things like grayscale.svg and flaticon.woff and other image/font assets are because you don't have those files in app/assets (or vendor/assets). Or if you do, you should make sure your JS/CSS files and view files refer to them with <%= asset_path "grayscale.svg" %> so that when Rails mangles their path you are still loading them from the right place. Read about image_url and friends and make sure you understand how they work. By default, the Asset Pipeline serves unmangled names in development and mangled names in production, so things might work right up until you push it all live!
Also, if you include <%= foo %> tags in a CSS file or JS file, then you need to add an .erb extension to that file, so that Rails knows to process those tags. That's why you're getting a 404 error trying to load this:
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E
In one of your files, probably a CSS file, you're doing something like this:
background-image: url("<%= asset_path('random.jpg') %>");
But the file needs an .erb extension: blah.css.erb or blah.scss.erb or whatever.
Errors like $ is not a function mean that those files depend on jQuery, but the jQuery $ object is not defined. If you are using noConflict, as someone suggested in the comments, you should stop, because you do want $ to be the jQuery object.
Good luck! If you are feeling overwhelmed, I would really start with cutting out as many of the JS require lines as possible, and tackle the bugs one at a time.
Also, I would re-order the require lines so that dependencies are at the top (e.g. jquery), and things that rely on them are lower.
Oh one more thing, not really a bug: I would avoid putting already-minified files (like hammer.min.js) into your repository. The Asset Pipeline knows how to minify. So check in the unminified version, so that if you have to read the source code, you can.

I put this post out as a job on upwork.
The solution is complex, but in case it helps others to understand what's gone wrong:
some gems require jQuery features. That can clash with the general inclusion of jQuery in application.js - I had some specific code written to manage specific conflicts.
in application.js, you need to list all the requirements in order, so that dependencies are below the js file that depends on them. Its difficult to know which file depends on what. I never would have figured this out alone
my rake assets:precompile call puts compiled assets in the public folder. I overrode this because it was causing conflicts with other calls (especially when files are updated).
There is no real help in this answer for anyone trying to learn. I didn't exactly learn how to solve these problems myself, but I did find an expert on upwork, who was able to help so that I could move on.
I'm afraid this is one of those messy problems that the blog tutorials don't help with.

Not sure why no one has posted this but $.something in jQuery is just shorthand for jQuery.something.
The ability to disable this is baked into jQuery
https://api.jquery.com/jquery.noconflict/
Here is an example from their documents
jQuery.noConflict();
// Do something with jQuery
jQuery( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";
Essentially it'll be a lot easier to just use "jQuery" vs "$" in your hand rolled code than change the inherited library. That being said you should submit a issue to the offending library to fix this functionality, similar to how jQuery does it, as jQuery is pretty popular.
Good luck!

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 Adobe Edge Scripts into Rails Asset Pipeline

This is likely a simple case of bringing external scripts with dependencies into Rails.
I'm trying to get my Adobe Edge generated Animations to work within my Rails app and the first step is to include all of Adobe Edge's generated js files, but so far I'm just getting a bunch of 404 Not Found Errors for all of the Edge files I've included in the Application.js file.
Here's my Application.js file
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require california_internet
//= require hero_edgePreload
//= require edge_includes/edge.1.5.0.min
//= require hero_edge
//= require hero_edgeActions
Here is how Edge's Preloader.js is trying to find some of the files...
aLoader=[{load:"edge_includes/jquery-1.7.1.min.js"},{load:"edge_includes/edge.1.5.0.min.js"},{load:"hero_edge.js"},{load:"hero_edgeActions.js"}]

The way I got this to work was change hero_edgePreload.js to hero_edgePreload.js.erb
And change:
aLoader=[
{load:"edge_includes/jquery-1.7.1.min.js"},
{load:"edge_includes/edge.1.5.0.min.js"},
{load:"hero_edge.js"},
{load:"hero_edgeActions.js"}
];
To:
aLoader=[
// {load:"edge_includes/jquery-1.7.1.min.js"}, Already required in application.js
{load:'<%= asset_path("edge.1.5.0.min.js") %>'},
{load:'<%= asset_path("hero_edge.js") %>'},
{load:'<%= asset_path("hero_edgeActions.js") %>'}
];
You can remove any Adobe Edge JS files from your requires in application.js too.
You'll have to add asset_path to any images in hero_edge.js and change it to hero_edge.js.erb too.
If there's an easier way, I'd love to know it :)

The solution of Michael Johnston of changing Edge's aLoader paths works, but gives errors. While on localhost, I would get Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. on random basis, while after deployment to Heroku at every page refresh.
Additionally, my app depends on jQuery already in higher version - therefore adding the one from Edge animation could possibly cause conflicts.
After trial and error(s) I decided to use this solution:
place the whole animation into /public/edge folder
put the animation into an iframe: <iframe class="animation-container" src='/edge/animation.html' />
Not the most elegant one, but certainly saves a lot of headaches.