javascript_include_tag and custom js files

rubyonrails-talk
1

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.

2

On Sun, Jul 10, 2016 at 5:43 AM, 'krfg' via Ruby on Rails: Talk

3

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.

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

4

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 .