# Nested frame and stream

**URL:** <https://discuss.hotwired.dev/t/nested-frame-and-stream/1990>\
**Category:** General\
**Created:** [January 14, 2021, 10:36am UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990 "2021-01-14T10:36:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Axel\_B](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/axel_b/32/1389_2.png) [@Axel\_B](https://discuss.hotwired.dev/u/Axel_B)\
**Post date:** [January 14, 2021, 10:36am UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/1 "2021-01-14T10:36:15Z")

</div>

Hello, I have multiple posts, each can have multiple comments, and I have a “messages” stream:

```
<%= turbo_stream_from "posts" %>

<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>

```

Inside the “post” partial, the post frame display the post without problem:

```
  <%= turbo_frame_tag post do %>
    <p><%= post.body %></p>
  <% end %>
  
  <%= turbo_stream_from "comments" %>
  <%= turbo_frame_tag dom_id(post) do %>
      <%= render post.comments %>
  <% end %>

```

But I have a problem with the “comments” section.  
When I create a comment, if I have 10 post, the message is displayed 10 time inside the same message.

I think it’s because the “comments” stream use the same name/ID inside each post, but if I change the ID, the content cannot be broadcasted by the configuration used inside the model:

 ![Capture d’écran 2021-01-14 à 11.31.41](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/d/d29963d22956117d431e23d067b0e01bb7c0e035.png)

How can I fix this problem please?  
Thanks.

---

<div class="post-metadata">

**Author:** ![miczed](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/miczed/32/1445_2.png) [@miczed](https://discuss.hotwired.dev/u/miczed)\
**Post date:** [January 14, 2021, 12:42pm UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/2 "2021-01-14T12:42:00Z")

</div>

I ran into the same issue just a couple of hours ago. You can actually specify a “target” option for the broadcast methods.

```
class Comment < ApplicationRecord
  belongs_to :post
  # "comments" is the name of the ActionCable channel
  # target specifies which turbo frame you want to append the comments to
  # in your case it will be the dom_id of the post
  after_create_commit { broadcast_prepend_to "comments", target: post }
  after_update_commit { broadcast_replace_to "comments" }
end

```

That way the comments will be broadcasted using the “comments” channel and will be appended to the turbo\_frame with the dom\_id of the post. If you omit the target parameter, rails will look for a turbo-frame with the dom\_id of the comment itself (e.g. “comment\_10”) so make sure that you have a matching turbo-frame in your comments ERB partial.

---

<div class="post-metadata">

**Author:** ![Axel\_B](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/axel_b/32/1389_2.png) [@Axel\_B](https://discuss.hotwired.dev/u/Axel_B)\
**Post date:** [January 14, 2021, 2:42pm UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/3 "2021-01-14T14:42:52Z")

</div>

Thanks, but this solution doesn’t work for me, the comment is added after the div#post\_id and not after the comments list inside div#post\_id.

You can see the broadcasting log here:

> [ActionCable] Broadcasting to comments: "\<turbo-stream action="append" target="post\_156"\>\<turbo-frame id="comment\_174"\>\n …

---

<div class="post-metadata">

**Author:** ![miczed](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/miczed/32/1445_2.png) [@miczed](https://discuss.hotwired.dev/u/miczed)\
**Post date:** [January 14, 2021, 3:05pm UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/4 "2021-01-14T15:05:36Z")

</div>

Can you share the comments partial as well? What ID does the comment list inside your div#post\_id have?

---

<div class="post-metadata">

**Author:** ![Axel\_B](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/axel_b/32/1389_2.png) [@Axel\_B](https://discuss.hotwired.dev/u/Axel_B)\
**Post date:** [January 22, 2021, 11:31am UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/5 "2021-01-22T11:31:51Z")

</div>

Work with:

`after_create_commit { broadcast_prepend_to 'comment', target: post }`  
Insted of:  
`after_create_commit { broadcast_prepend_to 'comments', target: post }`

But… Use prepend, append or replace here has the same effect and add the comment without problem, but a #post\_175 is added inside #post\_175 everytime I add a new comment:

![Capture d’écran 2021-01-22 à 12.45.22](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/2X/0/0bb7310903779d6043e1950d40e2647bf505d82c.png)

---

<div class="post-metadata">

**Author:** ![BryTai](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/brytai/32/1313_2.png) [@BryTai](https://discuss.hotwired.dev/u/BryTai)\
**Post date:** [January 24, 2021, 11:22pm UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/6 "2021-01-24T23:22:31Z")

</div>

Try

`after_create_commit { broadcast_append_to "post_#{self.post.id}_comments", target: "post_#{self.post.id}_comments" }`

in your comment.rb and change your turbo\_frame/stream\_from respectively

---

<div class="post-metadata">

**Author:** ![Axel\_B](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/axel_b/32/1389_2.png) [@Axel\_B](https://discuss.hotwired.dev/u/Axel_B)\
**Post date:** [January 27, 2021, 8:10pm UTC](https://discuss.hotwired.dev/t/nested-frame-and-stream/1990/7 "2021-01-27T20:10:29Z")

</div>

This is the solution but the comment counter inside the parent post is not updated.