Bootstrap 5+Rails 7 Turboframe模态框动态加载内容异常问题

问题根源 #

Bootstrap 5的data-bs-toggle="modal"会拦截链接的默认点击行为，导致Turbo无法发起请求加载href对应的内容到指定Turbo Frame中，这就是点击后模态框打开但内容为空的核心原因——Bootstrap 4的remote属性在Bootstrap 5中已被移除，原有逻辑不再适用。

解决方案 #

调整触发逻辑，让Turbo先完成内容加载，再打开模态框，具体步骤如下：

1. 修改触发链接
   移除链接上的Bootstrap模态触发属性，保留Turbo Frame标识和跳转地址：

<a data-turbo-frame="remote_modal_content" class="btn btn-outline-primary" href="/lists/3/issue_items/new">+</a>

2. 添加JavaScript监听逻辑
   通过监听Turbo的turbo:frame-load事件，在目标Frame加载完成后自动打开模态框：

document.addEventListener('turbo:frame-load', (event) => {
  // 确认是目标模态框的Frame加载完成
  if (event.target.id === 'remote_modal_content') {
    // 初始化并显示Bootstrap模态框
    const modalElement = document.getElementById('remote_modal_frame');
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
  }
});

3. 模态框代码保持不变
   你的remote_modal_frame代码无需修改，Turbo会自动将服务器返回的内容填充到turbo_frame_tag中：

<div class="modal fade" id="remote_modal_frame" 
    tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <%= turbo_frame_tag "remote_modal_content" %>
    </div>
</div>

额外优化（可选） #

如果需要处理重复点击或加载状态，可以给链接添加加载中状态，避免重复请求：

const modalLink = document.querySelector('[data-turbo-frame="remote_modal_content"]');
modalLink.addEventListener('click', () => {
  modalLink.disabled = true;
  modalLink.textContent = '加载中...';
});

document.addEventListener('turbo:frame-load', (event) => {
  if (event.target.id === 'remote_modal_content') {
    const modalElement = document.getElementById('remote_modal_frame');
    const modal = new bootstrap.Modal(modalElement);
    modal.show();
    // 恢复链接状态
    modalLink.disabled = false;
    modalLink.textContent = '+';
  }
});

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