Rails(Turbo)表单原地渲染：如何更新表单外元素？

问题根源很明确：使用form_with提交时默认是AJAX异步请求，控制器返回render :edit后，Rails只会自动替换表单所在的DOM元素，而页面上的示例div不在表单范围内，所以哪怕后端的@sample_invoice_number_format已经更新，前端也不会刷新这块内容。

下面给两种可行的解决办法：

方案1：用Turbo Stream精准更新（Rails 7+推荐） #

Turbo是当前Rails默认的前端框架，用Turbo Stream可以指定更新页面上的任意元素，步骤如下：

1. 修改控制器的update方法，返回Turbo Stream响应：

def update
  if @invoice_number_format.update(invoice_number_format_params)
    sample_invoice_number_format # 更新@sample_invoice_number_format
    logger.warn(@sample_invoice_number_format)
    # 分别更新示例区域和表单
    render turbo_stream: [
      turbo_stream.replace('sample-invoice-box', partial: 'sample_invoice', locals: { sample: @sample_invoice_number_format }),
      turbo_stream.replace('invoice-config-form', partial: 'form', locals: { invoice_number_format: @invoice_number_format })
    ]
  else
    render :edit, status: :unprocessable_entity
  end
end

2. 把示例区域拆成局部视图_sample_invoice.html.erb：

<div id="sample-invoice-box"><%= sample %></div>

3. 主视图里引入这个局部视图：

<%= render 'sample_invoice', sample: @sample_invoice_number_format %>
<%= render 'form', invoice_number_format: @invoice_number_format %>

4. 给表单加个ID，方便Turbo定位：

<%= form_with model: invoice_number_format, id: 'invoice-config-form' do |form| %>
  <!-- 原有复选框和提交按钮保持不变 -->
<% end %>

这样每次提交后，Turbo会分别更新示例容器和表单，实现实时刷新。

方案2：手动处理AJAX回调（适配老版本Rails UJS） #

如果项目仍在使用Rails UJS，可手动监听AJAX成功事件，自行更新示例区域：

1. 先给示例div加个ID：

<div id="sample-invoice"><%= @sample_invoice_number_format %></div>
<%= render "form", invoice_number_format: @invoice_number_format %>

2. 给表单加ID，然后添加全局JS监听：

<%= form_with model: invoice_number_format, id: 'invoice-form' do |form| %>
  <div>
    <%= form.label :yyyy %>
    <%= form.check_box :yyyy, onchange: "this.form.requestSubmit()" %>
  </div>
  <!-- 其他复选框保持原有onchange设置 -->
<% end %>

<script>
document.addEventListener('ajax:success', function(event) {
  // 只处理目标表单的提交事件
  if (event.target.id === 'invoice-form') {
    // 从返回的HTML里提取更新后的示例内容
    const parser = new DOMParser();
    const responseDoc = parser.parseFromString(event.detail[2].responseText, 'text/html');
    const newSampleContent = responseDoc.getElementById('sample-invoice').innerHTML;
    // 更新页面上的示例区域
    document.getElementById('sample-invoice').innerHTML = newSampleContent;
  }
});
</script>

这样每次提交成功后，就会自动把新的示例值替换到页面上。

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