Hotwire Discussion

Target attribute on turbo-frame tags

#1

I’m struggling a bit with the target attribute. it works pretty good with ‘_top’, but according to the docs, when I want to affect a turbo-frame context ‘b’ from within a turbo-frame context ‘a’ I should use the target=‘b’ option.

By default, navigation within a frame will target just that frame. This is true for both following links and submitting forms. But navigation can drive the entire page instead of the enclosing frame by setting the target to _top . Or it can drive another named frame by setting the target to the ID of that frame.

It turns out that it’s not working at all, I’m using something like that:

<turbo-frame id='a' target='b'>
 <!-- some action -->
</turbo-frame>

<turbo-frame id='b'>
 <!-- result -->
</turbo-frame>

Also, my response do have the turbo-frame context b.

Have you guys faced this behavior as well ?.

1 Like
#2

I tried it to and you’re right. The same for me, the setting the target to another frame does not seem to work.

#4

the turbo-stream though, has a target attribute, I wonder if it’s just a documentation issue

#5

The functionality described in the docs makes perfect sense though

#6

I interpreted the documentation in the same way as written above. I am also unable to get the desired behavior solely using <turbo-frame> with the target attribute.

The only way I’ve been able to get the desired behavior is to create and respond with turbo_stream.erb template:

<turbo-stream action='replace' target='b'>
  <template>
    <turbo-frame id='b'>
      <!-- your content here -->
    </turbo-frame>
  </template>
</turbo-stream>
1 Like
#7

I’m running into a similar issue. The users of my app can add comments. These comments can of course have links to external and internal pages. I don’t want these to open within the current frame, nor do I want to add target="_top" to each link.

So I added target="_top" to the frame instead. This works, but now clicking the “edit” link within the frame no longer works as expected. Rather than replacing the frame with its “edit” equivalent, it replaces the whole page with the edit-page. I did add target="comment_1234" (ID of the frame) to the edit-link, but it has no effect.

#8

Has anyone found a fix for this, I am getting the same problem between two frames and the docs are terrible for this.

#9

I was able to fix this on my machine by running rails assets:clobber task. Also, note, if you have any JS errors this will not work.

#10

data-turbo-frame="other_frame_id"?

1 Like
#11

yep, that worked correctly, but it looks like rails caches js in development when it shouldn’t