How to use Javascript in Ruby on Rails?
Have you found this?
Where to Stick Your JavaScript.
Where to Stick Your JavaScript
Whether you use the Rails asset pipeline or add a
<script>
tag directly to a view, you have to make a choice about where to put any local JavaScript file.We have a choice of three locations for a local JavaScript file:
- the
app/assets/javascripts
folder- the
lib/assets/javascripts
folder- the
vendor/assets/javascripts
folder
Here are guidelines for selecting a location for your scripts:
- Use
app/assets/javascripts
for JavaScript you create for your application.- Use
lib/assets/javascripts
for scripts that are shared by many applications (but use a gem if you can).- Use
vendor/assets/javascripts
for copies of jQuery plugins, etc., from other developers.
In the simplest case, when all your JavaScript files are in the
app/assets/javascripts
folder, there’s nothing more you need to do.Add JavaScript files anywhere else and you will need to understand how to modify a manifest file.
Mysterious Manifests
There are two kinds of files in a JavaScript assets folder:
- ordinary JavaScript files
- manifest files
You can also haveCoffeeScript
files andERB
files which are variations on ordinary JavaScript files.
Manifest files have the same .js file extension as ordinary JavaScript files. Manifest files and ordinary JavaScript files can be combined in a single file. This makes manifest files mysterious, or at least non-obvious.
The default app/assets/javascripts/application.js file is a
manifest file
. It’s a manifest file because it contains directives://= require jquery
//= require jquery_ujs
//= require_tree .
Directives tell Sprockets which files should be combined to build a single JavaScript script. Each file that contains manifest directives becomes a single JavaScript script with the same name as the original manifest file. Thus the
app/assets/javascripts/application.js
manifest file becomes theapplication.js
script.All scripts in the
app/assets/javascripts
folder are automatically added to the defaultapplication.js
script when the manifest file includes the default //= require_tree . directive.
Hope this helps.
ruby on rails - add javascript
Adding your custom javascript to your rails app is real easy, just follow the steps below :-
- create a file (say custom.js) under app/assets/javascripts/
- Open up your manifest file i.e application.js (this is the file where you need to include every javascript file you want to load into your rails app, add the script name to it //=require custom.
- Visit your rails app from browser and check the page source and search for custom.js being loaded or not thats all.
Injecting ruby with javascript on Ruby on Rails
Have a look at the Working with JavaScript in Rails guide, specifically the section about how to respond from your Rails server with some JavaScript that then gets evaluated by the client ("rails-ujs").
This gives you all the powers you need (and can replace quite a lot what people nowadays use entire JS frameworks for, btw)
All you need is link_to ... remote: true
to a path that is handled by a controller action that can respond_to ... format.js
. Then you put a something.js.erb
file into the correct place in your app/views
folder and Rails does the rest for you.
Have a close look at the full guide to get the full picture and comment below if you still have questions. I'd be happy to extend my answer!
How to require custom JS files in Rails 6
Get better-organized code and avoid multiple javascript_pack_tags in your application.html.erb file with this approach:
- Add your custom
example.js
javascript file toapp/javascript/packs
. - Add
require("packs/example")
to yourapplication.js
file.
I would have liked to add a comment to Asim Hashmi's correct answer. But I don't have enough reputation, so I'll add my suggestion as an answer instead.
It isn't necessary to include the ".js" extension inside of the require.
Related Topics
Angular 2: Two Backend Service Calls on Success of First Service
Ruby Array to JavaScript Array
How to Get an Ajax Get-Request to Wait for the Page to Be Rendered Before Returning a Response
How to Pause a Youtube Player When Hiding the Iframe
The Definitive Best Way to Preload Images Using JavaScript/Jquery
Encrypting Data with Ruby Decrypting with Node
How to Linebreak an Svg Text Within JavaScript
Alternative to Jquery's .Toggle() Method That Supports Eventdata
Js.Erb Not Executing JavaScript But Is Processed Rails
Encrypt iOS and Decrypt Node.Js Aes
Ruby on Rails 4 JavaScript Not Executed
Compare JavaScript Array of Objects to Get Min/Max
Why Is It Frowned Upon to Modify JavaScript Object's Prototypes
How to Tell If a <Script> Tag Failed to Load
JavaScript with Embedded Ruby: How to Safely Assign a Ruby Value to a JavaScript Variable