Bootstrap 4 Popover在PHP include引入页面时无法加载AJAX数据

1. AJAX 请求路径错误（最常见原因） #

单独运行子页面时，visit_grade_popover.php的相对路径是正确的，但被主页面include后，主页面所在目录可能和子页面不同，导致AJAX请求找不到目标文件。

解决办法：
将AJAX的url改为绝对路径，适配项目部署结构：

url: '/your-project-path/visit_grade_popover.php',

或者用PHP动态生成绝对路径（兼容不同部署环境）：

url: '<?php echo rtrim(dirname($_SERVER['PHP_SELF']), '/') . '/visit_grade_popover.php'; ?>',

2. DOM 选择器匹配错误 #

主页面的表格结构可能和子页面单独运行时不同（比如多了<thead>表头行），导致$('table tr').each()循环到表头行，获取的course/teacher为空，后端返回无数据。

解决办法：
明确只循环表格主体的行：

$('table tbody tr').each(function() {
  // 原逻辑代码
});

同时在控制台打印数据确认列索引是否正确：

console.log('课程:', course.trim(), '教师:', teacher.trim());

3. 重复初始化 Popover 冲突 #

如果主页面已经初始化过Bootstrap Popover，子页面的$(document).ready()再次初始化会导致逻辑冲突，无法正常加载内容。

解决办法：
给未初始化的元素标记状态，避免重复初始化：

$(document).ready(function() {
  $('.popover-ajax:not([data-initialized])').each(function() {
    $(this).popover({
      html: true,
      delay: { "show": 500, "hide": 100 }
    }).attr('data-initialized', 'true');
  });

  // 后续AJAX逻辑...
});

4. 调试AJAX错误定位问题 #

在AJAX的error回调中添加详细错误信息，快速排查问题类型：

error: function(xhr, status, error) {
  console.error('AJAX错误:', status, error);
  popoverTrigger.attr('data-content', '加载失败：' + error);
}

打开浏览器控制台（F12）查看错误：

• 404：路径错误（对应问题1）；
• 500：后端visit_grade_popover.php脚本报错；
• 其他：请求被拦截或跨域问题。

5. 移除重复ID避免DOM异常 #

你的<a>标签包含id="popover-trigger2"，如果页面被include多次或循环生成多个popover元素，重复ID会导致DOM操作异常，建议移除该ID，仅保留类选择器：

<a href="#" data-toggle="popover" title="Grade Distribution" data-content="Loading..." class="popover-ajax" data-placement="right" data-trigger="hover" data-report-date="<?php echo $row_RecordsetGrades['Report_Date']; ?>">
  <i class="fa fa-info-circle" aria-hidden="true"></i>
</a>

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