Need help with [name]TargetConnected()

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

Nothing looks particularly obvious, just from reading. What version are you using?

I have the following in package.json

    "@hotwired/stimulus": "^3.0.0-beta.1",
    "@hotwired/turbo-rails": "^7.0.0-rc.3",

Perhaps try the latest version (not beta) and see if it works?

1 Like

The only other thing I could think of is that the html tags might not be opened/closed correctly…but it’s hard to say without seeing the actual code.

I have the same problem that [name]TargetConnected(element) { } never seems to fire, whatever I try. I haven’t found any production code yet that uses that technique, but it is part of the documentation at this point in time.

I’m trying to get a controller method to do something on elements that are added to the DOM from a turbo stream, as soon as they are added. I’ve tried several methods but keep running into roadblocks.

I hope someone knows how to do this and can provide a suggestion!

My Stimulus version is 3.2.1. My turbo version is 7.3.0.