Rails中如何在turbo_frame内提交表单而不刷新框架？

要解决Turbo Frame内表单提交导致框架刷新的问题，核心是让Turbo明确提交结果的更新目标，同时确保服务器返回的响应匹配对应框架ID。

关键处理步骤 #

• 给表单指定Turbo目标框架：在form_with中添加data: { turbo_frame: "sample-frame" }，明确告知Turbo将提交后的响应内容更新到ID为sample-frame的框架内，避免触发整个框架刷新或页面跳转。
• 服务器返回匹配的Turbo Frame响应：控制器处理完表单提交后，返回的视图必须包裹在ID为sample-frame的Turbo Frame标签中，这样Turbo才能精准替换框架内的内容。

修正后的视图代码 #

<%= turbo_frame_tag "sample-frame" do %>
  <%= form_with(model: model, url: sample_p_url, method: :put, data: { turbo_frame: "sample-frame" }) do |f| %>
    <!-- 其他表单字段 -->
    <%= f.submit "Save" %>
  <% end %>
<% end %>

控制器示例（以update动作为例） #

def update
  @model = Model.find(params[:id])

  if @model.update(model_params)
    # 渲染包裹在sample-frame中的表单视图，确保响应包含对应框架
    render partial: "models/form", locals: { model: @model }, layout: false
  else
    # 验证失败时返回带框架的表单，保留错误提示
    render :edit, layout: false
  end
end

之前尝试无效的原因 #

• data: {turbo: true}：Turbo默认已全局启用，该属性仅用于全局禁用场景下强制开启Turbo，无法指定目标框架。
• data: {remote: true}：这是Rails UJS的属性，Turbo接管表单提交逻辑后，该属性不再生效。

内容的提问来源于stack exchange，提问作者aldrien.h