More from Henry Kim

RSS

Turbo-Location header: redirect a frame submission to a new URL

159 views

0 comments

                  class ProjectsController < ApplicationController
  def create
    @project = Project.new(project_params)

    if @project.save
      response.set_header('Turbo-Location', project_url(@project))
      head :see_other
    else
      respond_to do |format|
        format.turbo_stream { render :create, status: :unprocessable_entity }
        format.html { render :new, status: :unprocessable_entity }
      end
    end
  end

  private

  def project_params
    params.require(:project).permit(:name)
  end
end

                  <%= turbo_stream.replace 'project_form' do %>
  <%= render 'form', project: @project %>
<% end %>

                  <%= turbo_frame_tag 'modal' do %>
  <div id="project_form">
    <%= render 'form', project: @project %>
  </div>
<% end %>

When a form submits inside a Turbo Frame, a normal redirect can sometimes feel odd (especially if the redirect response doesn’t include the matching frame). A clean approach is to set the Turbo-Location header for Turbo requests. Turbo interprets it as a top-level navigation, so the browser URL updates and you land on the show page as expected. I use this for “create in modal then go to show” flows: validate and save in the controller, then either (a) replace the modal with errors (422), or (b) set Turbo-Location and return head :see_other. This keeps the flow predictable and avoids writing JS to close modals or manually visit URLs.

Henry Kim

More from Henry Kim

Turbo-Location header: redirect a frame submission to a new URL

0 Comments

More from Henry Kim