Load custom javascript files in Rails app

Question

I developed a javascript diagram tool (using kineticjs), and need to load some different js files. But they need to be load in order. I manage to do that this way:

inside a specific view (in the top of the file):

<%= javascript_include_tag "kinetic" %>
<%= javascript_include_tag "diagramtool/diagramtool0" %>
<%= javascript_include_tag "diagramtool/diagramtool1" %>
<%= javascript_include_tag "diagramtool/diagramtool2" %>
<%= javascript_include_tag "diagramtool/diagramtool3" %>
<%= javascript_include_tag "diagramtool/diagramtool5" %>
<%= javascript_include_tag "diagramtool/diagramtool6" %>

this in 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'

# 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 )

Rails.application.config.assets.precompile += %w( kinetic.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool0.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool1.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool2.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool3.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool5.js )
Rails.application.config.assets.precompile += %w( diagramtool/diagramtool6.js )

And the files are located in assets/javascripts/diagramtool

The problem is that they are not load in order when I move to the view that has the code above to load the files. But if I refresh the page they are load in order!

So, my questions are

How can I assure the js files are load in order? Why the files are load in order when I refresh the page? And why they are not load in order when I navigate through the application?

There is another way to do this? I tried to do it in application.js using the asset pipeline with the "require" key word. But I don't know how to do it there.

I also tried to put all the code in one file, but the file is load before the kinetic file! And I get errors because I need to load the library file first. But if I refresh the page it works again.

Any help? I don't really know what to do, to have this working properly. I'm new at Ruby on Rails, and I'm still learning how to do this kind of "configurations".

Edit: I'm not using the application.js to load the js files, because I wasn't able to do it that way. But here it is:

//= require jquery
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks

/* 
 require kinetic
 require diagramtool
 require_tree . 
 */

Can you provide the code where you require your js files "application.js" — Alaa Othman
– Alaa Othman, Commented Oct 21, 2014 at 22:27
@AalaaMohamed I don't know how to do it in the application.js file, but I have put it above in the edit section. — Mario
– Mario, Commented Oct 21, 2014 at 22:43

Mario · Accepted Answer · 2014-10-27 16:47:57Z

3

Just solved it this way:

created a manifest file diagrams.js:

//= require diagramtool/kinetic
//= require diagramtool/diagramtool0
//= require diagramtool/diagramtool1
//= require diagramtool/diagramtool2

Added this in the view:

<%= javascript_include_tag "diagrams" %>

Using the asset pipeline with a manifest file.

answered Oct 27, 2014 at 16:47

Mario

1,2532 gold badges14 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Load custom javascript files in Rails app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related