Turbo Frame Redirect and Render

1

Hi, I am trying to learn turbo and I’m working at the following thing:

Have a modal to create a resource. Here I want to either re-render the view if the form validation fails, or redirect to edit_path if the resource is saved.

index.html

  <div class="px-4 text-sm flex flex-col h-full 0">
    <div class="flex justify-between flex-wrap mb-4">
      <div>
        todo sort
      </div>
      <%= link_to 'New Store', new_admin_store_path, data: {turbo_frame: 'new_store'}, class:'action-button' %>
    </div>

    <%= render partial: 'stores', locals: {stores: @stores}%>
    <%= turbo_frame_tag 'new_store' %>
  </div>

new.html.erb

<%= render "shared/popup", frame_id: "new_store", classes:'size-full' do %>
  <%= render partial: 'form' %>
<% end %>

_popup.html.erb

<% classes ||= ''%>
<%= turbo_frame_tag frame_id do %>
  <% if turbo_frame_request? %>
    <div class="fixed inset-0 flex items-center justify-center bg-black/25" data-controller="popup" data-popup-target="container">
      <div class="bg-white p-2 flex flex-col items-end">
        <%= inline_svg_tag 'icons/close.svg',
          class: 'highlight-hover',
          data: { action: 'click->popup#close' } %>
        <%= yield %>
      </div>
    </div>
  <% else %>
    <div class="<%=classes%>">
      <%= yield %>
    </div>
  <% end %>
<% end %>

_form.html.erb

  <%= @store.errors.messages %>
  <%= form_with model: [:admin, @store] do |form| %>
    <div class="w-max">
      <div class="w-max flex flex-wrap gap-4">
        <div class="">
          <%= form.label :name, 'Name' %>
          <%= form.text_field :name, class: "w-full form-input" %>
        </div>
        <div class="">
          <%= form.label :slug, 'Slug' %>
          <%= form.text_field :slug, class: "w-full form-input" %>
        </div>
      </div>
      <div class="w-full hidden">
        <div class="">
          <%= form.label :description, 'Description' %>
          <%= form.textarea :description, rows: 3, class: "w-full form-input" %>
        </div>
      </div>
    </div>
    <%= form.submit class: 'action-button mt-2' %>
  <% end %>

Stores#create

    def create
      @store = Store.new(store_params)
      if @store.save
        redirect_to edit_admin_store_path(@store, format: :html)
      else
        render :new
      end
    end

I tried to add data: {turbo_frame: ‘_top’} inside the form_with, but this does not allow me to re-render the new view.

I wonder how should i solve this issue, any help is appreciated. Thank you!

2

Just solved this. Solid information Reload page with turbo frame after modal form submit and Ability to override frame-target from server response · Issue #257 · hotwired/turbo · GitHub

I wrapped my form inside another turbo-frame and I just created a custom Turbo Stream Action.

# frozen_string_literal: true

module TurboStreamActionsHelper
  def force_redirect(path)
    turbo_stream_action_tag :force_redirect, path: path
  end
end

Turbo::Streams::TagBuilder.prepend(TurboStreamActionsHelper)

then

create.turbo_stream.erb

<% if @valid_store %>
  <%= turbo_stream.force_redirect(edit_admin_store_path(@store)) %>
<% else %>
  <%= turbo_stream.replace "store_form" do %>
    <%= render "admin/stores/form", store: @store %>
  <% end %>
<% end %>

Hope it helps you.