CODEWITHSUNDEEP
ruby-on-railsturboturbo-frames
Jason Swett
Jason Swett

Reputation: 45094

Link to turbo frame not working, navigating full page instead

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?

Upvotes: 14

Views: 11779

Answers (10)

Brendon Muir
Brendon Muir

Reputation: 4612

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.

Upvotes: 0

Diego Velez
Diego Velez

Reputation: 1893

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

Upvotes: 0

antonas
antonas

Reputation: 31

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.

Upvotes: 3

judel
judel

Reputation: 31

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.

Upvotes: 3

JUlinder
JUlinder

Reputation: 1065

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.

Upvotes: 0

user137717
user137717

Reputation: 2165

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.

Upvotes: 1

SunTechnique
SunTechnique

Reputation: 185

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.

Upvotes: -3

Gary Haran
Gary Haran

Reputation: 687

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

Upvotes: 2

Gogamar
Gogamar

Reputation: 173

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

Upvotes: 5

Tun
Tun

Reputation: 1447

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

Upvotes: -3

Related Questions