Javascript files only work alphabetically in Rails app

Question

I'm building a weight loss app that tracks a user's weight and how many calories they've eaten each day. I'm using Highcharts to display this information, with each chart saved in either calories.js or weights.js. The calorie chart displays fine, but I've run into a problem displaying the weights chart. It only displays if I also display the calories chart on the same page.

The only change I make is in the view, where I add the calorie chart's div code - no changing of the model, controller, or javascript. Somehow that fixes the weight chart.

If I rename weights.js to something that comes before calories.js alphabetically - aweights.js - then the problem is reversed, and I can't get the calories chart to display without the weights chart. Calories.js and weights.js always load, according to the Rails console.

What's going on here?

Edit: Backbone.js - Coffeescript extends says that ROR does import assets alphabetically, so this isn't too crazy.

Any suggestions on how to make the .js file only load if the correct controller or view is used? — Coco13, Oct 24 '13 at 21:02
The easiest thing to do might be to fix what's broken when both files are loaded; the asset pipeline tends to believe it'll just dump all your CS/JS to the browser. — Dave Newton, Oct 24 '13 at 21:21

score 0 · Answer 1 · answered Oct 24 '13 at 20:36

0

Are you using rails 3.1 or above?

if so you should have a look on your app/assets/application.js

//= require jquery
//= require jquery_ujs 
//= require_tree .

If you need a certain load order you can set it there like below:

//= require jquery
//= require jquery_ujs 
//= weight
//= calories
//= require_tree .

Otherwise rails will require files in the directory in alphabetical order.

Have a look at the guide: http://guides.rubyonrails.org/asset_pipeline.html

answered Oct 24 '13 at 20:36

Steffen Jurrack

108
2
6

Then the problem is just reversed - calories will load, but weight won't. I need a way to either have both load, or just the one I want. – Coco13 Oct 24 '13 at 20:51
Then you have different options: (1) create own js-bundles and load those ones in the view or (2) remove the require tree and load files required on all pages, use include_javascript_tag in the view – Steffen Jurrack Oct 25 '13 at 14:57

score 0 · Accepted Answer · answered Nov 04 '13 at 16:11

Thanks for all the comments, it helped me get in the direction I needed to go. Instead of loading all the assets, which is what was causing the problem, I only loaded the one I needed on the page. I did this using a yield in the header to only load that specific .js file. I also needed to change the \app\assets\javascript\application.js file to not automatically include that entire directory.

Javascript files only work alphabetically in Rails app

2 Answers2