如何在Rails ActiveAdmin中实现弹窗模态表单功能？

1. 先搞懂你写的那段代码 #

你之前添加的这段代码，是给Rails Admin的模型new页面加了个自定义操作按钮：

action_item only: :new do
  link_to('Click Here', "#", data: {toggle: "modal", target: "#modal"})
end

• action_item：Rails Admin提供的用来添加自定义操作按钮的方法
• only: :new：指定这个按钮只在模型的新建页面显示
• 链接里的data: {toggle: "modal", target: "#modal"}是Bootstrap模态框的触发属性，但你没定义ID为modal的模态框内容，所以点击后没实际效果。

2. 编写模态框的HTML结构 #

在app/views/rails_admin/main/目录下创建_custom_modal.html.erb文件，填入模态框的基础结构和表单：

<div class="modal fade" id="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">自定义表单</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 替换成你实际的模型和字段 -->
        <%= form_for YourModel.new, url: rails_admin.create_path(model_name: 'your_model') do |f| %>
          <%= f.text_field :name %>
          <!-- 其他需要的表单字段 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <%= f.submit '保存', class: 'btn btn-primary' %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

3. 让模态框在页面加载时渲染出来 #

修改你的action_item代码，把模态框的局部视图一起渲染到页面上：

action_item only: :new do
  link_to('Click Here', "#", data: {toggle: "modal", target: "#modal"}) + render('rails_admin/main/custom_modal')
end

这样页面加载后，模态框的HTML就会被插入，点击按钮就能触发显示。

4. 优化表单提交后的体验 #

默认提交后会跳转到Rails Admin的成功页面，要是想提交后自动关闭模态框并刷新页面，在app/assets/javascripts/rails_admin/custom.js里加一段JS：

$(document).on('ajax:success', '#modal form', function() {
  $('#modal').modal('hide');
  location.reload(); // 刷新页面更新数据
});

同时给表单加上remote: true属性开启AJAX提交：

<%= form_for YourModel.new, url: rails_admin.create_path(model_name: 'your_model'), remote: true do |f| %>

5. 一对多关系场景的适配（如果需要） #

要是你是在父模型页面添加子模型的模态表单，比如父模型是ParentModel，子模型是ChildModel，可以调整表单关联父ID：

<%= form_for ChildModel.new(parent_id: params[:id]), url: rails_admin.create_path(model_name: 'child_model'), remote: true do |f| %>
  <!-- 子模型的表单字段 -->
<% end %>

这样提交后子模型会自动关联对应的父模型。

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