Stimulus js controller - stimulusjs

Question

How do I call a stimulus controller function on page load?
Here is my function in stimulus controller:
hide(event)
{
$(this.testTargets[0].tpggle(event.currentTarget.checked);
}

Answer 1

connect() {
this.[call action function name on target you want to set]
}
Can't tell what that name is by what you've given, but the connect function will call on load.
EDIT after comment
Okay, since I do not know what your html or your stimulus controller looks like. I'm going to guess.
I see checkbox on one line so I'm going to assume you have a checkbox that you want to check on page load. I'll assume your html looks something like this:
<div data-controller="test">
<h1 class="font-bold text-4xl">Test#index</h1>
<p>Find me in app/views/test/index.html.erb</p>
<%- arr = %w{one two three four five} %>
<%- arr.each do |t| %>
<%= check_box_tag t,'0',false ,data:{test_target:"checkbox"}%>
<label><%= t %></label>
<%- end %>
</div>
Just a page with 5 checkboxes that are targets.
To check the first one, its just:
// file test_controller.js
import { Controller } from "#hotwired/stimulus"
export default class extends Controller {
static targets = [ "checkbox"]
connect() {
this.checkboxTargets[0].checked = true
}
}
But I'll also assume you are going to do something else with the checkboxes. Maybe hide/show an element. I have no idea what you are going to do, but if you did want to hide/show element on the page it would be something like this and you have a class hidden that we are going to toggle:
<div data-controller="test">
<h1 class="font-bold text-4xl">Test#index</h1>
<p>Find me in app/views/test/index.html.erb</p>
<%- arr = %w{one two three four five} %>
<%- arr.each do |t| %>
<%= check_box_tag t,'0',false ,data:{test_target:"checkbox",
action:"test#doSomething"}%>
<label><%= t %></label>
<%- end %>
<div class="hidden" data-test-target="display">
<span>Display one</span>
</div>
<div class="hidden" data-test-target="display">
<span>Display two</span>
</div>
<div class="hidden" data-test-target="display">
<span>Display three</span>
</div>
<div class="hidden" data-test-target="display">
<span>Display four</span>
</div>
<div class="hidden" data-test-target="display">
<span>Display five</span>
</div>
</div>
and the expanded controller:
import { Controller } from "#hotwired/stimulus"
export default class extends Controller {
static targets = [ "checkbox","display"]
connect() {
this.checkboxTargets[0].checked = true
this.displayTargets[0].classList.remove('hidden')
}
doSomething(){
var idx = this.checkboxTargets.indexOf(event.target)
this.displayTargets[idx].classList.toggle('hidden')
}
}
Hope this gets you started. It takes a little time to get the hang of stimulus terminology.

Answer 2

Try this out my dude! Stimulus is great because it really relieves the pains that come w state management
in terminal:
$ rails g stimulus checkbox && rails g stimulus multiple_checkboxes
in app/javascript/controllers/checkbox_controller.js
// app/javascript/controllers/checkbox_controller.js
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="checkbox"
export default class extends Controller {
static values = {
toggled: Boolean // Defaults to false
}
static targets = [ "checkbox" ]
// Lifecycle Callbacks
// https://stimulus.hotwired.dev/reference/lifecycle-callbacks#methods
// initialize(){
// console.log("checkbox_controller initialized") // Once, when the controller is first instantiated
// }
//
// connect() {
// console.log("checkbox_controller connected") // Anytime the controller is connected to the DOM
// }
//
// disconnect(){
// console.log("checkbox_controller disconnected") // Anytime the controller is disconnected from the DOM
// }
//
// checkboxTargetConnected(element) {
// console.log("checkbox_controller target connected") // Anytime a target is connected to the DOM
// }
//
// checkboxTargetDisconnected(element) {
// console.log("checkbox_controller target disconnected") // Anytime a target is disconnected from the DOM
// }
changeToggleValue(element){
this.toggledValue = !this.toggledValue
}
toggledValueChanged(value, previousValue) {
if (previousValue != undefined ) {
console.warn('toggledValueChanged')
console.log('previousValue')
console.log(previousValue)
console.log('value')
console.log(value)
}
}
}
in app/javascript/controllers/multiple_checkboxes_controller.js
// app/javascript/controllers/multiple_checkboxes_controller.js
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="multiple-checkboxes"
export default class extends Controller {
static values = {
toggled: Boolean
}
static targets = [ "checkbox" ]
checkboxTargetConnected(element) {
console.log('multiple-checkboxes checkboxTargetConnected')
}
changeToggleValue(){
console.log('changeToggleValue')
this.toggledValue = !this.toggledValue
this.checkboxTargets.forEach(targ => targ.checked = this.toggledValue)
this.anotherFunction()
}
selectAll(){
console.log('selectAll:')
if (this.toggledValue != true) {
this.toggledValue = true
this.checkboxTargets.forEach(targ => targ.checked = true)
this.functionYouWantToInvokeOnSelectAll()
} else {
console.log('nothing to do! All targets are selected')
}
}
functionYouWantToInvokeOnSelectAll(){
console.log('The more the merrier')
}
unselectAll(){
console.log('unselectAll:')
if (this.toggledValue != false) {
this.toggledValue = false
this.checkboxTargets.forEach(targ => targ.checked = false)
this.functionYouWantToInvokeOnUnselectAll()
} else {
console.log('nothing to do! No targets are selected' )
}
}
functionYouWantToInvokeOnUnselectAll(){
console.log('Less is more')
}
anotherFunction(){
console.log('yezzzzirr')
}
toggledValueChanged(value, previousValue) {
if (previousValue != undefined ) {
console.warn('toggledValueChanged')
console.log('previousValue')
console.log(previousValue)
console.log('value')
console.log(value)
}
}
}
And finally this in your view:
<!--
Paste this in the head tag that lives in application.html.erb if you dont already have Tailwind installed
<script src="https://cdn.tailwindcss.com"></script>
-->
<div data-controller="checkbox" class="my-5">
<span class="text-3xl"> checkbox </span>
<br>
<input type="checkbox" data-checkbox-target="checkbox" data-action="checkbox#changeToggleValue">
<label for=""> w/e </label>
</div>
<div data-controller="multiple-checkboxes" class="my-5">
<span class="text-3xl"> checkboxezzzz </span>
<br>
<div class="my-3 flex space-x-3">
<button
type="button"
data-action="multiple-checkboxes#changeToggleValue"
class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Toggle
</button>
<button
type="button"
data-action="multiple-checkboxes#selectAll"
class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Select All
</button>
<button
type="button"
data-action="multiple-checkboxes#unselectAll"
class="inline-flex items-center rounded border border-transparent bg-blue-100 px-2.5 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Unselect All
</button>
</div>
<div class="space-y-3">
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
<div>
<input type="checkbox" data-multiple-checkboxes-target="checkbox">
<label for=""> w/e </label>
</div>
</div>
</div>
Good luck!