Develop Reference

Best way to call JS files?

Issue: I noticed my chartkick charts were not appearing and stuck on "loading..." within production.
I debugged and realized the reason is because i recently created a bunch of .js files under javascripts to cut down on <script></script> code within my views and instead using <%= javascript_include_tag "word" %>.
What the problem is, and the difference btween the charts showing and not showing is in my initializers/assets.rb folder is:
Rails.application.config.assets.precompile << '*.js'
Without this, it works, but also without it, i cannot load my independent JS files.
How can I load my JS files, under assets/javascripts/file_name.js and also have my charts working?
Is there a better way to call my JS files, without needing to use script tags?
Application.js:
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require popper
//= require bootstrap-sprockets
//= require jquery3 #i have this here and not over popper because if it isn't in this position, most of my javascript/jquery features under bootstrap do not work - i haven't figured this out yet. I will most likely use pure jquery/JS and remove all bootstrap JS if I cannot find this reason
//= require Chart.bundle
//= require chartkick
//= require_tree .

rails: assets js manifest not picking up specific js file

I can't get my prints.js file to get picked up by the manifest (I presume that is the issue.)
this is in the appliction.js manifest:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require 'main'
//= require 'cards'
//= require 'prints'
//= require_tree .
the cards.js has a console log saying hello like this :
$(document).on('turbolinks:load', function() {
console.log('cards js file executed.')
...
});
When I do the same thing for cards.js like this:
$(document).on('turbolinks:load', function() {
console.log('Prints js file executed.');
});
the console only calls out the cards.js console log statement, but not prints.
I restarted rails server, and rebooted my local machine hoping that would pick it up. but no result.
(Rails 4.2)
EDIT
I am decided to use the application.js for hosting the function I need.
Though it works, it feels 'cheap' and if anybody has any suggestions of what could make a manifest not include files, that would be greatly appreciated. But I have a temporary solution.

try without quote like following. after change please restart server
//= require main
//= require cards
//= require prints

Rails app does not load a specific JavaScript file

I currently try to port this template from startbootstrap.com into my rails app. Most of it already works but the navigation bar does not change its color while scrolling.
The different colors are achieved by the creative.js file. I put this file under assets/javascript and included as in my application.js file:
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
I inspected the assets with the Chrome Developer Tools and the creative.js file does not appear there. Since the other javascript files appear in the asset folder the asset pipeline seems to be working.
What do I have to change so that the creative.js file appears in my assets too?

I faced the same issue with my project where I tried to incorporate Bootstrap's creative theme.
The issue for me was that creative.js was not included at the right position (if you notice in the original theme the JS script calls are made at the end of the HTML file, after all the class and id declarations).
Your order of inclusion inside application.js is correct =>
//= require jquery
//= require bootstrap.min
//= require jquery.easing.min
//= require jquery.fittext
//= require wow.min
//= require creative
//= require jquery_ujs
//= require turbolinks
//= require_tree .
However, there is a good chance that application.js is not included at the right spot. Ensure that you are including the files after the below code segment has ended =>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
Best of luck!

Try to delete the coffee file with the same name.
In your case creative.coffee
It worked for me!

rails fixed header table with varied width

I'm trying to create a fixed header table in my index view. After 2 days I'm on it, I finally found the jQuery fixedheadertable addon, and I still can't use it. I guess I'm doing something wrong because it's the first time I'm using jQuery. This is what I have done:
Added the file jquery.fixedheadertable.js to \app\assets\javascripts
In application.js:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
..
..
In my_js_coffee_file:
$ ->
$("#id_of_my_index_table").fixheadertable({
caption : 'My header is fixed !',
height : 200
});
Also tried:
$ ->
$('#id_of_my_index_table').fixedHeaderTable('show');
No change at all...
what's wrong here?
Thanks.

Your question does not have the details to properly analyse what is wrong. However, try these and see if it helps.
Does your application.js have require_tree in it? Also, try adding your my_js_coffee_file in the end of the application.js
Ex :
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.fixedheadertable
//= require my_js_coffee_file
Or alternatively, you can also code the same thing inside the application.js file itself. And then try running. Check your console log to see what errors pop up.

Using stickyTableHeaders JQuery plugin solved my problem.
https://github.com/jmosbech/StickyTableHeaders

Order of requires in Asset Pipeline, Does it Matter?

In my javascript application.js file I have the following
//= require search
//= require tutorial
//= require_self
//= require_tree .//message
Is there a problem with me putting //= require_tree .//stock after require_self? It looks like everything is working but I'm not sure of the implications of putting tree after self.

All that is doing is changing the order of where the javascript contained in application.js, if any, is concatenated with the rest of the assets. If you have any code in application.js that is required in search or tutorial, then it will not work correctly.
You can read more about directive in the RailsGuides.

Yes, order matters, thats why jquery is always on top, if you have any js that deppends on it, it wont work