3

The turbo handbook explains target: '_top' here and here.

But I still don't understand what's the difference between these two forms:

#1

<%= turbo_frame_tag 'new_search', target: '_top' do %>    
  <%= search_form_for :q do |f| %>
    ...
  <% end %>
<% end %>

#2

<%= search_form_for :q do |f| %>
  ...
<% end %>

Both form will send a normal HTML format request via GET method, and the whole page will be replaced by Turbo Drive. So their behavior looks quite similar in this case.

Is target: '_top' only useful when I need to lazy load something via the src attribute of Turbo Frame while I want the content navigate outside the frame? :

<%= turbo_frame_tag 'something', src: '/something', target: '_top' %>
wintersolutions
  • 5,173
  • 5
  • 30
  • 51
hungmi
  • 335
  • 7
  • 11

1 Answers1

1

You are correct that a form outside of any wrapping frame (like your #2 example) is the same as a form within a frame tag that has a target="_top"

But consider your first example without the _top attribute:

<%= turbo_frame_tag 'new_search' do %>    
     <%= search_form_for :q do |f| %>
     ...
     <% end %>
<% end %

This is now not the same as example #2, the result of the search form will only operate within the new_search frame. This is the point of the _top attribute, to break a form or link outside of it's wrapping frame.

Joel Blum
  • 7,750
  • 10
  • 41
  • 60
  • 2
    Thank you! But when do I need to break the form outside of its frame? I mean I can just remove the frame in my code. And if I want to make specific link in the frame to navigate outside, I can use `data-turbo-frame="_top"` on the link. So I don't see a good case to add `target="_top"` to a frame. – hungmi Jun 10 '21 at 08:48
  • 2
    You might be correct that it only makes sense when it's lazy loaded with src. Hotwire is still very new and the docs could be lacking, I recommended asking on their community page https://discuss.hotwire.dev/ – Joel Blum Jun 10 '21 at 22:12
  • in another word "_top" is target whole page? – buncis May 16 '23 at 12:55