question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Redirect to new page on successful form submission, rerender otherwise

See original GitHub issue

I’m trying to figure out how to do this. Right now, when I submit a form from within a turbo_frame_tag, I’m reliant on the response having a matching turbo_frame_tag to replace the content of the tag. So regardless of whether it’s a successful or failed form submission, the user doesn’t leave the current page right now.

On a successful submission, I’d like to redirect the user to a new page. There are a couple of angles I’ve considered:

  • Setting the target attribute to _top, which isn’t optimal because it’d replace the view in full in either case.
  • Wrapping the target view in another turbo_frame_tag, which feels clunky and also might not account for wider layout changes.

Is there a known way to do this?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:40
  • Comments:72 (11 by maintainers)

github_iconTop GitHub Comments

38reactions
inopinatuscommented, May 25, 2021

Having just derived @danjac’s solution from first principles, and found it works fine, it’s what I’ll stick with myself. To reiterate:

Render the form inside a turbo-frame, but with data-turbo-frame="_top" on the form element e.g. in the _form partial:

<%= turbo_frame_tag "user_modal" do %>
  <%= form_with model: @user, data: { "turbo-frame" => "_top" } do |form| %>
  #... etc
  <% end %>
<% end %>

Now write boring, ordinary controller code:

def update
  #...
  if @user.valid?
    @user.save
    redirect_to @user, notice: "updated"
  else
    render :edit
  end
end

and alongside app/views/users/edit.html.erb, add edit.turbo_stream.erb, containing one line:

<%= turbo_stream.replace("user_modal", partial: 'edit') %>

When the post is a Turbo navigation, and we have errors and therefore render the edit form, Rails chooses the turbo_stream view based on the content headers and replaces the modal. On success it gets the redirect, honours the _top target, and redirects the whole page. I don’t think this is a hack, frankly, I think this is system-working-as-designed.

Bonus: this continues working with JS disabled, since it falls back to plain old HTTP, plain old HTML forms, and renders the usual form partial inside the usual layout.

27reactions
tdakcommented, Feb 17, 2021

I think the main confusion here is about turbo_frame_tag use.

Ideally, redirect should just replace the page, regardless of what turbo_frame_tags are on the page or where it came from. That’s what redirect implies. Take me to a new page.

For anything else, if you want specific section of the page replaced, using turbo_stream to replace that page section makes sense.

Currently that’s not what’s happening. Any work arounds with stimulus or anything else are not ideal, because it breaks the general flow. Redirect should redirect.

Or at least if it finds the matching frame_tags it should replace those, if there aren’t any matching tags, it should replace the whole page.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to redirect from a form that is inside a turbo frame?
I have a page that shows a list of users in a group and a form for adding a new user by email....
Read more >
PHP Redirect to another page after form submit
Right after @mail($email_to, $email_subject, $email_message, $headers); header('Location: nextpage.php');.
Read more >
After a successful form submission, how do I redirect to ...
Put this in the form "POST-SUBMIT HTML" section under "advanced". Then replace the URL with where you want your page redirected to. Here...
Read more >
Render and Redirect - Jumpstart Lab Curriculum - Tutorials
Change the redirect_to to a render and recreate the problem of refreshing the page after a successful save. The browser should prompt you...
Read more >
Hotwire/turbo and form redirection - but how? : r/rails
Simple scenario: Log in view. When the credentials are invalid, re-render the form, otherwise redirect to the root path. Everything is ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found