使用rails-ujs提交远程表单时Rails.fire返回false如何解决

AI 小北

2026-9-28

根因分析

rails-ujs对远程表单（带data-remote="true"）的默认submit事件监听逻辑，要求触发事件是可信的原生用户交互事件，通过Rails.fire手动构造的事件不满足这个校验条件，因此会被直接拦截返回false，不会触发AJAX提交。

解决方法

方案1：触发隐藏提交按钮的点击事件（推荐，无侵入）

在表单内部添加一个隐藏的原生提交按钮，通过触发按钮的点击事件走rails-ujs的正常处理逻辑：

调整视图表单代码，新增隐藏提交按钮：

<%= form_with model: post, method: :PUT, url: post_update_url(post), local: false, html: { data: { target: "posts.form", action: "ajax:success->posts#submitSuccess" } } do |f| %>
  <%# 新增隐藏提交按钮 %>
  <button type="submit" data-posts-target="submitBtn" style="display:none;"></button>
  // Form stuff
<% end %>

调整Stimulus控制器代码，触发按钮点击：

// 新增submitBtn target
static targets = ["form", "submitBtn"]

submit() {
  this.submitBtnTarget.click()
}

submitSuccess() {
  console.log("Success!")
}

方案2：直接调用rails-ujs的远程提交方法

无需修改视图代码，直接调用rails-ujs暴露的handleRemote方法处理远程提交：

submit() {
  // 确认全局Rails对象可访问
  if (window.Rails && this.formTarget.dataset.remote === 'true') {
    Rails.handleRemote.call(this.formTarget)
  } else {
    this.formTarget.submit()
  }
}

submitSuccess() {
  console.log("Success!")
}