Ruby on Rails日历Popover编辑按钮跳转问题与模态框预加载实现咨询

1. 页面添加隐藏的模态框容器 #

在任务列表页面（如tasks/index.html.erb）中添加一个初始隐藏的模态框容器，用于存放预加载的编辑表单：

<div id="preloaded-edit-modal" class="modal fade" style="display: none;">
  <!-- 预加载的编辑表单将插入至此 -->
</div>

2. 监听Popover显示事件，预加载对应任务的编辑表单 #

假设你使用Bootstrap Popover，在tasks.js中监听Popover的shown.bs.popover事件，当Popover显示时，异步加载当前任务的编辑表单到隐藏模态框：

$(document).on('shown.bs.popover', '[data-toggle="popover"]', function() {
  const $trigger = $(this);
  const taskId = $trigger.data('task-id');
  const redirectUrl = '<%= j tasks_url(view: params[:view]) %>';
  
  // 请求对应任务的编辑表单
  $.get(`/tasks/${taskId}/edit?redirect_to=${encodeURIComponent(redirectUrl)}`, function(html) {
    $('#preloaded-edit-modal').html(html).hide();
  });
});

同时，确保触发Popover的元素携带任务ID标识：

<!-- 示例：日历上触发Popover的元素 -->
<div data-toggle="popover" data-task-id="<%= task.id %>" data-content="<%= render 'popover', task: task %>">
  <%= task.title %>
</div>

3. 修改Popover内的编辑按钮，改为触发模态框显示 #

修改_popover.html.erb中的按钮，移除remote: true，添加自定义点击事件阻止跳转并显示预加载的模态框：

<%= link_to '#', class: 'btn btn-outline-primary edit-task-btn' do %>
  <span class="fas fa-pen" aria-hidden="true"></span> Editar
<% end %>

在tasks.js中添加按钮的点击事件监听：

$(document).on('click', '.edit-task-btn', function(e) {
  e.preventDefault(); // 阻止默认页面跳转
  // 显示预加载的模态框（若使用Bootstrap模态框则调用modal('show')）
  $('#preloaded-edit-modal').modal('show');
});

4. 调整edit.js.erb逻辑 #

原edit.js.erb可能会自动显示模态框，现在改为仅更新模态框内容即可：

// edit.js.erb
$('#preloaded-edit-modal').html("<%= j render 'form', task: @task %>");

5. 处理模态框关闭后的重置 #

在tasks.js中监听模态框关闭事件，清空内容并恢复隐藏状态，避免残留旧数据：

$(document).on('hidden.bs.modal', '#preloaded-edit-modal', function() {
  $(this).empty().hide();
});

问题根源说明 #

Popover属于动态生成的DOM元素，页面初始化时UJS（Rails Unobtrusive JavaScript）为remote: true绑定的AJAX事件无法覆盖动态元素，导致点击按钮时触发默认跳转而非异步请求。预加载模态框的方式提前完成了表单的AJAX请求与渲染，避开了动态元素的事件绑定问题。

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