# Cross-controller communication for live-updates

**URL:** <https://discuss.hotwired.dev/t/cross-controller-communication-for-live-updates/3583>\
**Category:** General\
**Created:** [December 14, 2021, 6:49pm UTC](https://discuss.hotwired.dev/t/cross-controller-communication-for-live-updates/3583 "2021-12-14T18:49:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![malcolm.isaacson](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@malcolm.isaacson](https://discuss.hotwired.dev/u/malcolm.isaacson)\
**Post date:** [December 14, 2021, 6:49pm UTC](https://discuss.hotwired.dev/t/cross-controller-communication-for-live-updates/3583/1 "2021-12-14T18:49:43Z")

</div>

I’m still new to stimulus.js, so please forgive me if this question is naive.

I have an arbitrary text provided by users, sprinkled with placeholders formatted in a particular way ("{{ FIRSTNAME }}" for example).

```auto
<p data-controller="field clause">
  Quia deserunt enim quas qui corporis accusamus lab <span data-clause-target="tag">{{ FIRSTNAME }}</span> oriosam at minus hic animi quibusd <span data-clause-target="tag">{{ FIRSTNAME }}</span> am sint culpa velit necessi <span data-clause-target="tag">{{ LASTNAME }}</span> tatibus fugiat odit ipsam quos eiu <span data-clause-target="tag">{{ FIRSTNAME }}</span> s impedit recusandae modi dolorem.
</p>

```

In an entirely different `<div>` (positioning and hierarchy still unclear), I have a form which lists all these placeholders (it’s ERB):

```auto
<% @clause.variables.each do |variable, placeholder| %>
  <div data-controller="field clause" data-action="field:send->clause#fill">
    <input
    type="text"
    data-field-target="input"
    data-action="field#send"
    value="<%= placeholder %>">
  </div>
<% end %>

```

The value of `variable` might be ‘FIRSTNAME’, whereas the value of `placeholder` might be ‘{{ FIRSTNAME }}’ in order to match the placeholders in the text.

The goal is to provide a way to fill out stuff in the form, and live-update the text.

I’ve spent a couple hours trying to figure out [cross-controller coordination](https://stimulus.hotwired.dev/reference/controllers#cross-controller-coordination-with-events), but alas to no avail.

Here’s my code:

```auto
// app/javascript/controllers/field_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["input"]

  send() {
    this.dispatch("send", { detail: { content: this.inputTarget } });
  }
}

```

as well as…

```auto
// app/javascript/controllers/clause_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = ["tag"]

  fill({ detail: { content } }) {
    console.log(content);
    // HOW CAN I FILL OUT THE 'TAG' ELEMENTS HERE?
    // BONUS: HOW CAN I FILL OUT THE <APPROPRIATE> TAG HERE? (ie the one corresponding to the variable)
  }
}

```

Any help would be much appreciated!

---

<div class="post-metadata">

**Author:** ![malcolm.isaacson](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@malcolm.isaacson](https://discuss.hotwired.dev/u/malcolm.isaacson)\
**Post date:** [December 14, 2021, 7:02pm UTC](https://discuss.hotwired.dev/t/cross-controller-communication-for-live-updates/3583/2 "2021-12-14T19:02:14Z")

</div>

For what it’s worth, here’s a working setup:

```auto
//app/javascript/controllers/clause_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  fill({ detail: { content } }) {
    var tags = document.querySelectorAll('[data-field=' + content.dataset.field + ']');
    for (var i = 0; i < tags.length; i++) {
      tags[i].innerText = content.value;
    }
  }
}

```

But I don’t like it, as it kind of defeats the purpose of using stimulus…

---

<div class="post-metadata">

**Author:** ![rockwell](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/rockwell/32/1884_2.png) [@rockwell](https://discuss.hotwired.dev/u/rockwell)\
**Post date:** [December 21, 2021, 8:54pm UTC](https://discuss.hotwired.dev/t/cross-controller-communication-for-live-updates/3583/3 "2021-12-21T20:54:25Z")

</div>

Is it possible that you can merge the two different controllers into a single controller? if they share a parent element?