Link to turbo frame not working, navigating full page instead

Question

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?

Weasand

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. – Barnie

shouldn't it be data: { 'turbo-frame' => :my_frame }? – Enenstein

@Enenstein 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 – Chowchow

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 <turbo-frame id="YOUR_FRAME_NAME"> and is must be uniq – Bufflehead

My issue was trying to use a different layout file. it simply wouldn't respond correct when this was the case. – Sharkey

Answer 1

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

Cusk

Put the td on the outside of the turbo_frame_tag. Then it worked: <td> <%= turbo_frame_tag "edit_project" do %> <div><%= link_to "Edit", edit_project_path(project), class: "link-warning" %></div> <% end %> </td> – On

Answer 2

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.

Ebonieebonite

Similar story here, in my Symfony 6 app I needed to manually edit the controllers.json file to include @symfony/ux-turbo as a controller. You can also import @hotwired/turbo directly in your js file. – Restorative

Answer 3

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 %>

Knifeedged

update method can be used instead of replace to do the same – Acrobatic

Answer 4

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.

Dirge

data: { turbo_frame: 'my_frame' } gets rendered as data-turbo-frame='my_frame' in erb – Bulkhead

Answer 5

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.

Honaker

Answer 6

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.

Edmanda

Answer 7

Here are some ideas that might fix your issue

1. You are not including the js library for hotwired/turbo and hotwired/turbo-rails. You can add them by doing the following

# this will add the library to your importmaps

./bin/importmap pin @hotwired/turbo-rails 

# import libs in app/javascript/application.js

import "@hotwired/turbo"
import "@hotwired/turbo-rails"

2. You're using a custom layout

class ApplicationController < ActionController::Base
    layout :layout_by_resource

    private

    def layout_by_resource
        # turbo frames fix https://github.com/hotwired/turbo-rails#a-note-on-custom-layouts
        return "turbo_rails/frame" if turbo_frame_request?

        if devise_controller?
            # use custom layout for devise
            "no_navbar"
          else
            "application"
        end
    end
end

Menendez

Answer 8

Just to add to the list of things that might be wrong:

I had added data-turbo="false" higher up the document tree (on my nav menu) at some stage in the past when none of the buttons on the nav menu required turbo. This of course disabled turbo for any descendant links.

Batts

Answer 9

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 %>

Enenstein

Answer 10

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.

Carlita