Rail7中JS定时点击按钮触发Turbo表单提交报错问题

问题场景 #

带data-remote="true"的Rails button_to表单，手动点击按钮可正常通过broadcast更新局部视图；但在application.js中用setInterval定时调用按钮click()方法时，抛出错误：Form submission canceled because the form is not connected，且URL无刷新直接变化。

核心原因 #

1. DOM元素失效：Turbo/UJS更新局部视图后，初始缓存的按钮/表单元素已被替换，变成脱离DOM树的“disconnected”元素，调用其click()会触发默认表单提交而非remote逻辑。
2. 程序化触发方式不对：直接调用按钮click()可能绕过Rails UJS/Turbo的remote提交处理逻辑， fallback到普通表单跳转。

解决方案 #

1. 每次定时执行时重新获取DOM元素 #

不要在页面加载时缓存按钮/表单，而是每次定时任务执行时重新查询，确保拿到的是当前DOM中有效的元素：

document.addEventListener('DOMContentLoaded', function() {
  setInterval(function() {
    // 每次都查询最新的表单元素
    const targetForm = document.querySelector('form[data-remote="true"]');
    if (targetForm && targetForm.isConnected) {
      // 执行提交逻辑
    }
  }, 5000); // 按需调整间隔时间
});

2. 使用Rails UJS/Turbo的API触发提交 #

针对Rails UJS（传统方式）

直接调用UJS的fire方法触发表单的submit事件，确保remote逻辑被正确执行：

document.addEventListener('DOMContentLoaded', function() {
  setInterval(function() {
    const targetForm = document.querySelector('form[data-remote="true"]');
    if (targetForm && targetForm.isConnected) {
      Rails.fire(targetForm, 'submit');
    }
  }, 5000);
});

针对Turbo（Rails 7+默认）

使用Turbo官方API提交表单，适配Turbo的DOM更新逻辑：

document.addEventListener('DOMContentLoaded', function() {
  setInterval(function() {
    const targetForm = document.querySelector('form[data-remote="true"]');
    if (targetForm && targetForm.isConnected) {
      Turbo.submitForm(targetForm);
    }
  }, 5000);
});

3. 检查broadcast更新范围 #

确认broadcast更新的局部视图是否替换了整个表单元素，如果是，必须保证定时任务每次都能获取到最新的表单，避免操作旧的失效元素。

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