在CodeIgniter中加载视图作为模态弹窗的实现问题

嘿，作为CodeIgniter和MVC开发的新手，遇到模态弹窗加载页面的问题完全可以理解！我来帮你把现有代码补全，实现点击表格行后在模态框里加载对应的PHP页面。

第一步：添加模态框的HTML结构 #

首先你需要在页面里加入一个模态框的基础结构（这里用Bootstrap模态框为例，是CodeIgniter项目中最常用的方案）：

<!-- 模态框容器 -->
<div class="modal fade" id="taskModal" tabindex="-1" role="dialog" aria-labelledby="taskModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="taskModalLabel">任务详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- 这里会通过AJAX加载PHP页面内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

第二步：完善JavaScript点击事件逻辑 #

你已经写了给表格行绑定事件的开头，现在补全逻辑，通过AJAX请求CodeIgniter控制器，获取要显示的页面内容并插入模态框：

function addRowHandlers() {
  var tables = document.getElementsByClassName("tblTasks");
  [].forEach.call(tables, function(table) {
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
      var currentRow = table.rows[i];
      // 给每行绑定点击事件
      currentRow.onclick = function() {
        // 假设你需要传递任务ID到后端，这里从行的data-id属性获取（渲染表格时要加上这个属性）
        var taskId = this.getAttribute('data-id');
        
        // 发起AJAX请求
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '<?= base_url("tasks/get_task_details") ?>?id=' + taskId, true);
        // 如果你的CodeIgniter开启了CSRF保护，必须带上CSRF令牌
        xhr.setRequestHeader('X-CSRF-Token', '<?= csrf_hash() ?>');
        
        xhr.onload = function() {
          if (this.status == 200) {
            // 将返回的HTML插入模态框主体
            document.getElementById('modalBody').innerHTML = this.responseText;
            // 显示模态框
            $('#taskModal').modal('show');
          }
        };
        
        xhr.send();
      };
    }
  });
}

// 页面加载完成后执行事件绑定
window.onload = addRowHandlers;

提示：渲染表格行时记得加上data-id属性，比如 <tr data-id="<?= $task['id'] ?>">，这样才能把任务ID传递给后端

第三步：编写CodeIgniter控制器方法 #

在你的控制器（比如命名为Tasks.php）里添加一个方法，负责加载要显示在模态里的视图：

<?php
class Tasks extends CI_Controller {
  
  public function get_task_details() {
    // 获取前端传递的任务ID
    $task_id = $this->input->get('id');
    
    // 示例：从数据库获取任务数据（需要你提前创建对应的模型方法）
    $data['task'] = $this->task_model->get_task_by_id($task_id);
    
    // 直接加载视图并输出HTML，供AJAX接收
    $this->load->view('task_details', $data);
  }
}

第四步：创建模态框对应的视图文件 #

最后创建task_details.php视图文件，这就是你要在模态里显示的PHP页面内容：

<h4><?= $task['title'] ?></h4>
<p>任务描述：<?= $task['description'] ?></p>
<p>创建时间：<?= $task['created_at'] ?></p>
<!-- 这里可以添加更多任务详情的HTML内容 -->

关键注意事项 #

• 确保页面已经加载了Bootstrap的CSS和JS文件，否则模态框无法正常显示和交互
• 如果开启了CodeIgniter的CSRF保护，AJAX请求必须带上CSRF令牌，否则请求会被拒绝
• 检查控制器方法的路由权限，确保前端能正常访问这个接口

内容的提问来源于stack exchange，提问作者Tharavink Prasad Sivarajan