javascript_include_tag and custom js files

253 views
Skip to first unread message

krfg

unread,
Jul 10, 2016, 12:43:30 PM7/10/16
to Ruby on Rails: Talk
The default setting in my application.html.erb is:

<%= stylesheet_link_tag     'application', media: 'all', 'data-turbolinks-track': 'true' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'true' %>

I have a cusom.css.scss file in app/assets/stylesheets which is included as part of the application.css file included in the site layout, supposedly because of the
stylesheet_link_tag 'application' line of code.
I therefore planned to put all the javascript (jQuery and bootstrap) for my application in custom.js inside app/assets/javascript.
Would rails automatically load this file or am I expected to explicitly tell rails to load it?

What confuses me is that in the Ruby on Rails tutorial, when jQuery is used, it is put inside the html.erb document, like in Chapter 13, so that on the one hand it is used a custom.css.scss file as stylesheet, on the other hand, when javascript is required, it is inserted inside the html.erb document.

Hassan Schroeder

unread,
Jul 10, 2016, 2:17:35 PM7/10/16
to rubyonrails-talk
On Sun, Jul 10, 2016 at 5:43 AM, 'krfg' via Ruby on Rails: Talk
<rubyonra...@googlegroups.com> wrote:

> I therefore planned to put all the javascript (jQuery and bootstrap) for my
> application in custom.js inside app/assets/javascript.
> Would rails automatically load this file or am I expected to explicitly tell
> rails to load it?

What do the comments in

app/assets/javascripts/application.js

say about that?

--
Hassan Schroeder ------------------------ hassan.s...@gmail.com
http://about.me/hassanschroeder
twitter: @hassan
Consulting Availability : Silicon Valley or remote

Walter Lee Davis

unread,
Jul 10, 2016, 2:33:39 PM7/10/16
to rubyonra...@googlegroups.com
If you use jQuery, you have to guarantee that it loads before you rely on it. Load tree (the directive in the last line of application.js) loads the app/assets/javascripts folder, as well as the vendor/assets/javascripts folder, and any scripts declared by Gems, in filesystem order. I don't know the order of operations here off the top of my head, but it seems likely that you would have a hard time guaranteeing that jQuery was loaded before your script tried to use it, particularly if your script name started with an i or lower letter.

Walter

>
> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/18b8f034-eff8-498e-9e60-a3880094bf9c%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

krfg

unread,
Jul 10, 2016, 5:42:37 PM7/10/16
to Ruby on Rails: Talk
I past and copy below the content of my application.js file.
The lines '//= require jquery' and '//= require jquery_ujs' should assure that the jquery and jquery-ujs files provided by jquery-rails gem will be added to the asset pipeline and available for use. "The require_tree directive tells Sprockets to recursively include all JavaScript files in the specified directory into the output. These paths must be specified relative to the manifest file".(quoted from guides.rubyonrails.org). So the line '//= require_tree .' is telling Sprokets to include all files which are in the same directory of the manifest file ( . ), included my custom.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
//= require turbolinks
//= require_tree .
Reply all
Reply to author
Forward
0 new messages