Rails ActiveAdmin中redirect_to如何触发:confirm确认模态框
问题原因
你在redirect_to上加data: {confirm: xxx}的写法完全无法生效,核心原因是:
data-confirm触发弹窗是前端Rails UJS/Turbo的DOM交互机制:只有渲染在页面上的链接、按钮、表单等DOM元素携带该属性时,用户触发对应元素的点击/提交动作,前端脚本才会拦截动作弹出确认框,用户确认后才会继续执行后续跳转/提交。redirect_to是服务端直接返回302重定向响应,浏览器收到响应后会直接跳转到目标地址,整个过程不会渲染任何携带data-confirm属性的页面元素,你传入的data参数根本不会被输出到前端,自然无法触发弹窗。
另外你贴的代码里还有语法错误:哈希赋值写了=,正确写法应该是=>,但即使修正这个语法问题,功能也无法生效。
实现方案
根据你想要的弹窗触发时机,二选一即可:
方案1:提交后跳转页提示(改动最小,符合你当前控制器判断的逻辑)
如果不需要阻断表单提交,只是提交成功后告知用户GL_Permit字段缺失,通过Flash传标记+页面加载触发弹窗即可:
- 修改控制器create动作,移除redirect_to上无效的data参数,把提示信息存入Flash:
def create create! do |format| if resource.errors.present? return render :edit else # 检测到字段缺失时,把提示文案存入Flash,下一次请求可读取 flash[:notice_confirm] = "what about the GL Permit?" unless resource.GL_Permit.present? resource.reload format.html { redirect_to admin_gath_lines_path } end end end - 在ActiveAdmin的全局布局中(如果没有自定义布局可以手动创建
app/views/layouts/active_admin.html.erb继承默认布局),在head区域添加meta标签输出Flash中的提示内容:<% if flash[:notice_confirm].present? %> <meta name="notice-confirm" content="<%= flash[:notice_confirm] %>"> <% end %> - 在ActiveAdmin的全局JS文件(通常是
app/assets/javascripts/active_admin.js)中添加页面加载监听,检测到提示标记时弹出确认框:document.addEventListener('DOMContentLoaded', function() { const confirmMsg = document.querySelector('meta[name="notice-confirm"]')?.content if (confirmMsg) { // 弹出提示,用户点击确定/关闭都不影响后续逻辑,仅做告知 confirm(confirmMsg) } })
方案2:表单提交前触发提示(复用原有UJS确认框逻辑)
如果你希望用户点击提交按钮时就弹出提示,完全复用你之前link_to的同款默认确认框效果,不需要写自定义JS,只需要修改对应资源的ActiveAdmin表单配置,给提交按钮动态添加data-confirm属性即可:
# 对应模型的ActiveAdmin注册配置中 ActiveAdmin.register GathLine do form do |f| f.inputs do # 原有表单项配置 f.input :GL_Permit end f.actions do # 仅当当前表单对象的GL_Permit为空时,给提交按钮加确认提示 confirm_text = f.object.GL_Permit.blank? ? "what about the GL Permit?" : nil f.action :submit, button_html: { data: { confirm: confirm_text } } f.action :cancel end end # 原有控制器配置不需要额外加confirm相关逻辑 controller do def create create! do |format| if resource.errors.present? render :edit and return end resource.reload format.html { redirect_to admin_gath_lines_path } end end end end
注意:这个方案用的是UJS默认的确认逻辑,用户点「OK」才会提交表单,点「Cancel」会留在当前表单页。如果你需要不管点哪个按钮都正常提交表单,选方案1即可。
内容的提问来源于stack exchange,提问作者Sean Gillespie
相关产品推荐
相关产品推荐

