I'm really struggling to get Stimulus controllers to function in a Rails 7 app I'm working on and would appreciate any help anyone might have. I've been spinning my wheels forever.
My Application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails";
import "controllers";
import 'bootstrap';
I have Stimulus pinned in the importmap.rb per below:
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"
pin_all_from "app/javascript/controllers", under: "controllers"
I haven't touched the javascript/controllers/application.js or index.js files.
My Stimulus Controller (ingredients-controller.js):
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect () {
console.log('HELLOOO!!!!');
}
addIngredients(event) {
event.preventDefault();
alert('test');
}
}
Connected <div>
in my view below. All I'm trying at the moment is to get the <button>
element to preventDefault() and do a test alert. I can't get any response from the Stimulus Controller above.
<div data-controller="ingredients">
<turbo-frame id=<%= f.field_id(:ingredents) %>>
<h2>Add Ingredients</h2>
<%# Selection section %>
<div>
<h6>Spirits</h6>
<%= f.collection_select :spirit_id, Spirit.all, :id, :spirit_type, {}, { :size => "5", :multiple => true } %>
<h6>Mixers</h6>
<%= f.collection_select :mixer_id, Mixer.all, :id, :mixer_type, {}, { :size => "5", :multiple => true } %>
<h6>Garnishes</h6>
<%= f.collection_select :garnish_id, Garnish.all, :id, :garnish_type, {}, { :size => "5", :multiple => true } %>
</div>
<%# Selected Ingredients %>
</turbo-frame>
<button data-action="click->ingredients#addIngredients">Add Ingredients</button>
</div>
If anyone has any idea what I'm missing here it would be greatly appreciated! Thank you!
I had a similar problem (though with JS bundler) and I solved it by installing Stimulus manually. You can find the instructions here: https://github.com/hotwired/stimulus-rails
You may need to first run rails assets:clobber
to decompile all the assets you have compiled already and after you finish the manual installation of Stimulus perhaps you should run yarn build --watch
in another Terminal tab (the same way you would run rails s)
So the steps:
run rails assets:clobber
Add the stimulus-rails
gem to your Gemfile: gem 'stimulus-rails'
Run ./bin/bundle install
Follow the instructions for the manual installation (under the subheader "With import map") from https://github.com/hotwired/stimulus-rails .
Run yarn build --watch
in an additional tab
Test your Stimulus controller
Hope it helps!
In my case, I had to manually edit my app/javascript/controllers/index.js
to register the controller.
For exemple, after a rails g component dropdown
, I needed to edit the index.js
as follow (the command in the comment ./bin/rails stimulus:manifest:update
didn't update correctly the file...)
// app/javascript/controllers/index.js
// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName
import { application } from "./application"
import DropdownController from "../../components/dropdown_component/dropdown_component_controller"
application.register("dropdown", DropdownController)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.