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?

Answer 1

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

Answer 2

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.

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

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.

Answer 10

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.