Hello.
I am trying to do something that is maybe unorthodox. I have the following context:
In my view I render a turbo frame that contains some checkboxes and I have pagination for that frame. Basically I have to keep track of what checkboxes were checked so that I can send a unified request when all is good. I tried to use a controller that encapsulated the turbo_frame_tag so that I can keep track of the ids while the frame keeps changing. If I change the content of the frame the ids remain saved but the checkboxes reset every time. So i thought that by using checkboxTargetConnect() I could watch when the frame changes and check the checkboxes based on the id array that I have so the user knows which ones were and weren’t checked until now even if they run through multiple pages.
Let’s show some code
main view
<div data-controller="populate">
<%= turbo_frame_tag 'new_users', src: .... do %>
<h2> Placeholder, that gets replaced </h2>
<% end %>
<div>
loaded turbo frame content
<%= turbo_frame_tag 'new_users' do %>
.... some code that iterates through users....
<input type="checkox",
data-action="populate#update_ids",
id="<%= user.id %>",
data-populate-target="checkbox" />
.... end of some code ....
<%= paginate @user %>
<% end %>
stimulus controller
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["checkbox", "page"];
initialize() {
this.userIds = [];
}
connect() {
console.log('connected');
}
update_ids(event) {
const element = event.target;
if (element.checked) {
this.userIds.push(element.id);
} else {
const index = this.userIds.indexOf(element.id)
if (index > -1) {
this.userIds.splice(index, 1);
}
}
console.log(this.userIds)
}
checkboxTargetConnected(element) {
console.log("Connected checkbox")
}
}
So my problem is that I never see in my console the “Connected checkbox” text. I tried searching for examples and explanations but didn’t manage to find something conclusive. The ids are saved and the array is updated correctly with pagination and everything. I want to use checkboxTargetConnected() to check if the id is inside the array so after a page refresh I can check it there so the user can see the previous changes.
If anyone has attempted to do something like this before and has an idea what is wrong or could perhaps suggest a better way to handle such case then I would appreciate the feedback.
Thank you