Rails 6 - require JS files in some controller actions

Question

I'm currently trying Rails 6.0.0 which seems to have moved the default javascript folder from app/assets/javascript to app/javascript. The application.js file is now located in app/javascript/packs.

Now, I want to add JS file for each controller action. For example I have:

UsersController#index
UsersController#show
UsersController#edit

On some controller action I need to add some javascript:

app/javascript/user/index.js
app/javascript/user/show.js
app/javascript/user/edit.js
app/javascript/user/form.js (assume in form I need some js tweak)

Here is what I'm currently doing. In controller view:

<%= javascript_pack_tag 'user/index', 'data-turbolinks-track': 'reload' %>

However, in index.js I can't call libraries which has been required in application.js. For example in application.js:

require("bootstrap/dist/js/bootstrap")

In index.js I call bootstrap specific JS for popover, modal ... I got:

Uncaught TypeError: $(...).modal is not a function

I don't want to write all JS in application.js because every page have to load entire website JS which is nut! That why I want to split them and include when I need.

Beside, why we have to require JS file in application.js? If we using javascript_pack_tag do we need to require those file in application.js?

Here is a dummy repo I just created.

Ref: here explain how to require a custom JS file.

I can't mark as duplicate but this has been answered before here: https://stackoverflow.com/questions/56242664/how-to-require-custom-js-files-in-rails-6 — Gotenks-J, Aug 29 '19 at 05:40
What's your criteria to include the `app/javascript/user/form.js` pack? — Sebastián Palma, Aug 29 '19 at 07:48
@Gotenks-J thanks but I read from that post before I post this question, lemme update a ref link — truongnm, Aug 29 '19 at 08:29

score 0 · Answer 1 · edited Oct 03 '19 at 19:27

0

Add to your application.html.erb:

<%= javascript_pack_tag controller_name %> for controllers <br/>
<%= javascript_pack_tag action_name %> for actions

edited Oct 03 '19 at 19:27

Rastalamm

1,712
3
23
32

answered Oct 03 '19 at 17:12

jarpo

1

As I updated in question, I got error. I can't call bootstrap method in another script – truongnm Oct 07 '19 at 22:16

Elias Glyptis · Answer 2 · 2022-11-07T18:29:47.227

You can create a folder structure as your view. So say you have some custom form validations you want to add inside the edit view of the user. You have the following structure: app/views/users/edit.html.erb

In your edit.html.erb, remove all your JS code and remove the script tags. Instead add:

<%= javascript_pack_tag('user/edit') %>

Open app/javascript/packs folder. Create the same folder structure as your edit view like this: app/javascript/packs/product/edit.js.

Inside edit.js

window.onload = function () {
  // Your custom form validation JS code for users/edit
}

Open config/application.rb, and inside the module:

config.assets.precompile += ['user/edit.js']
# Keep appending more assets as you wish.

Rails 6 - require JS files in some controller actions

2 Answers2