11

I have the following code:

<%= turbo_frame_tag :my_frame do %>
  frame
<% end %>

<%= link_to "About", about_path, data: { turbo_frame: :my_frame } %>

When I click the "About" link, the frame's content doesn't get updated. Instead, the whole page navigates to about_path.

I know that it's not a problem with the above code because I tested the same exact code on a fresh app and it worked fine. Something about this app is different that's making this turbo frame link not work.

Any ideas?

Jason Swett
  • 43,526
  • 67
  • 220
  • 351
  • 1
    You really need to do the legwork and find out what it is thats different about this app. Check the web browser console and make sure you don't have errors and that you're actually getting the assets you expect. – max Apr 30 '22 at 18:34
  • shouldn't it be `data: { 'turbo-frame' => :my_frame }`? – Tun May 22 '22 at 10:12
  • 1
    @Tun the output of the element changes to `data-turbo-frame="my_frame"` when this erb gets rendered. Both your suggestion and the code in the original question are valid. But that's a good consideration to keep an eye out for – James Klein Sep 22 '22 at 14:07
  • I had exaclty the same problem. In my case it's was because for my test I use a frame name that corresponding to a previous id in the dom. Do not forget when you add a frame name, in the dom it will be `` and is must be uniq – jpheos Nov 04 '22 at 10:02
  • My issue was trying to use a different layout file. it simply wouldn't respond correct when this was the case. – Sean Szurko Jan 16 '23 at 20:53

8 Answers8

3

this is a late answer, but I've stumbled upon your question after having the same problem. In my case, I was trying to use turbo_frame_tag inside a table, and it wouldn't work because table wouldn't accept any other elements but its own: https://github.com/hotwired/turbo/issues/48

Gogamar
  • 115
  • 4
1

Turns out you have to have the response be wrapped in the same named turbo tag.

In your initial call

<%= turbo_frame_tag :my_frame do %>
  frame content
<% end %>

Your response should be wrapped as such:

<%= turbo_frame_tag :my_frame do %>
  response generated on server.
<% end %>
Gary Haran
  • 677
  • 1
  • 8
  • 16
0

It should be data: {"turbo-frame"=> "my_frame"} in the link_to tag. I think it's not understanding my_frame as a symbol or perhaps the turbo_frame key in the hash.

user137717
  • 2,005
  • 4
  • 25
  • 48
0

I just solved this similar situation now. The issue was a typo in the -tag of the view I was requesting. This error showed up in console as:

A matching frame for #show_client was missing from the response, transforming into full-page Visit.

Meaning that you should make sure that the resource you're requesting is in order, or else Rails will fallback to full-page replace of what your link is requesting.

JUlinder
  • 995
  • 1
  • 8
  • 19
0

This may be very particular to my case, but I also had this same issue.

Turned out to be that it was inside the scope of a stimulus controller, where I had a .stopPropagation() on one of the parent elements that my link was in.

Removing the .stopPropagation() allowed turbo-frame links to work again as expected.

ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
judel
  • 1
  • 1
  • 1
0

In my case it was because of absence of import of hotwire in application.js. I just added: import "@hotwired/turbo-rails" and it is done.

it is strange, because i do not see any requirement about it in turbo-rails gem and there was no these changes after running installation rake tasks.

My app is on rails 6.

antonas
  • 1
  • 1
-3

I assume you are overriding the navigation. According to the documentation, you code should be

<%= turbo_frame_tag :my_frame do %>
  frame
  
  <%= link_to "About", about_path %>
<% end %>
Tun
  • 1,345
  • 13
  • 34
-3

try it:

execute command in terminal yarn add @hotwired/turbo-rails

next add line import "@hotwired/turbo-rails" into app/javascript/application.js

and run rails by bin/dev instead rails s

it works for me.

SunTechnique
  • 185
  • 2
  • 4