Rails 7中Turbo Stream模态框二次点击跳转异常求助

首次点击"add"按钮时，Turbo会自动插入ID为modal的Turbo Frame到页面中；但表单提交后，你的create.turbo_stream.erb使用turbo_stream.replace "modal", ""把整个Turbo Frame元素替换成了空字符串，导致页面中不再存在该Frame。再次点击按钮时，Turbo找不到指定的data-turbo-frame="modal"对应元素，就会回退到普通页面跳转逻辑，直接打开new页面。

1. 在索引页预先保留空的Turbo Frame #

打开index.html.erb，在页面合适位置（比如底部）添加空的Turbo Frame，确保页面始终存在该元素：

<%= turbo_frame_tag "modal" %>

2. 修改Turbo Stream更新逻辑，避免删除Frame #

打开create.turbo_stream.erb，将替换整个Frame的操作改为更新Frame内容为空；如果使用Bootstrap模态框，额外添加JS代码关闭弹窗：

<%= turbo_stream.prepend "myfifteens", @myfifteen %>
<%= turbo_stream.update "modal", "" %>
<%# 配合Bootstrap模态框关闭弹窗 %>
<%= turbo_stream.execute "$('.modal').modal('hide')" %>

若使用Bootstrap模态框，需确保new.html.erb包含完整模态框结构：

<%= turbo_frame_tag "modal" do %>
  <div class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <%= render "myfifteens/form", myfifteen: @myfifteen %>
      </div>
    </div>
  </div>
  <script>
    document.addEventListener('turbo:load', function() {
      const modal = document.querySelector('.modal');
      if (modal) new bootstrap.Modal(modal).show();
    });
  </script>
<% end %>

3. 修复控制器保存逻辑 #

打开myfifteens_controller.rb，将save!改为save——save!会在保存失败时抛出异常，无法进入错误处理分支：

if @myfifteen.save
  # 原有成功逻辑
  respond_to do |format|
    format.html { redirect_to year_myfifteens_path(@year) }
    format.turbo_stream
  end
else
  render :new, status: :unprocessable_entity
end

4. 给筛选表单绑定Turbo Frame #

打开_form.html.erb，给筛选表单添加data-turbo-frame="modal"，确保筛选操作在模态框内完成，不会跳转页面：

<%= form_tag new_year_myfifteen_path(@year), method: :get, data: { turbo_frame: "modal" } do %>
  <%= select_tag 'category', options_for_select(@categories, @selected_category), include_blank: 'Select category' %>
  <%= submit_tag 'Filter' %>
<% end %>

内容的提问来源于stack exchange，提问作者Alice Laurin