More from Henry Kim

RSS

Frame navigation that targets a specific frame via form_with

13949 views

0 comments

                  <%= form_with url: issues_path, method: :get, data: { turbo_frame: 'issue_results' } do |f| %>
  <%= f.select :status, options_for_select(%w[open closed], params[:status]), include_blank: 'Any' %>
  <%= f.submit 'Apply', class: 'ml-2 rounded bg-gray-100 px-3 py-1' %>
<% end %>

<%= turbo_frame_tag 'issue_results' do %>
  <%= render @issues %>
<% end %>

                  class IssuesController < ApplicationController
  def index
    @issues = Issue.order(created_at: :desc)
    @issues = @issues.where(status: params[:status]) if params[:status].present?
  end
end

Sometimes a form submission should update a specific section rather than navigate the whole page. With Turbo, this is as easy as setting data-turbo-frame on the form. For example, a filter form can target a results frame, so submissions replace only that region. This pattern works especially well with GET forms because you keep URLs and shareability. I also use it for “inline create” forms that should append to a list frame. The key is consistency: the response should contain the same frame id. If you return full HTML without that frame, Turbo will treat it as a full visit. I typically pair this with a respond_to that returns both HTML and turbo stream versions depending on what’s most convenient.

Henry Kim

More from Henry Kim

Frame navigation that targets a specific frame via form_with

0 Comments

More from Henry Kim