Ruby on Rails 4: How to include Javascript files in Rails web application?

Question

I am building a Rails 4 web application and I want to include some .js files into my application. Is it possible to directly add JavaScript file to my Rails ..app/assets/javascripts folder and add reference in application.js like this?

//= customejsfile.js 

Is this the right way? If yes, is it possible for me to follow the same steps in adding jQuery and Bootstrap library?

Any help is appreciated.

Solution 1

The right way to include your files is:

//= require customejsfile

in your application.js file. What's more, by default you have

//= require_tree .

which requires all js files from assets/javascript path, so you don't have to type it on your own (and you shouldn't, or you'll have your file included twice). JQuery library is included by default (and it comes from jQuery gem). If you want Bootstrap, then you can do it this way or use one of existing gems, like bootstrap-generators or twitter-bootstrap-rails.

Solution 2

Taking a look at the application.html.erb file, you'll see that the application.js was referenced via:

<%= javascript_include_tag "application", "data-turbolinks-track" => true  %>

So when I had this challenge, what I did was: add this script in the file where I wanted to reference my custom javascript, but this time I modified the parameter. So instead of "application," I have this:

<%= javascript_include_tag "customjsFile", "data-turbolinks-track" => true  %>

Hope this helps.

Solution 3

You have to explicitly add jquery and bootstrap in application.js, whereas you will automatically include custom files requiring the directory tree. If you take a look at your application.js there should be a manifest saying that. This is how your application.js should look like with bootstrap and jquery

// 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 vendor/assets/javascripts of plugins, if any, 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/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
//= require turbolinks
//= require_tree .

No need to add your custom file in this list as you are requiring all the files at the same level of your application.js (or lower in the directory tree) with the last directive (require tree .)

Solution 4

<script src="<%= asset_path 'my_js_file' %>"></script>

Works fine also if you don't wanna use javascript_include_tag

View more solutions