在 CodeIgniter 中将视图加载为模式弹出窗口

Question

我是 CodeIgniter 的新手，也是 MVC Web 应用程序的新手。我在模式弹出窗口中显示 php 页面时遇到问题。 下面的代码显示了第一个视图。

<table id="tblTask" class="tblTasks">
    <tr>
      //I am showing my data here
    </tr>
 </table>

 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];
          var createClickHandler = 
              function(row) 
              {
                  return function() { 
                            //code to get parameter 1 and 2
                            window.location = "<?php echo base_url() . "tasks/getInfos/"; ?>" + parameter1 + "/" + parameter2;
                        };
              };

          currentRow.onclick = createClickHandler(currentRow);
      }
    });
}
window.onload = addRowHandlers(); 

这是视图 1，其中我有一个显示我的数据的表格，并且该脚本用于在单击表格行时调用控制器。

public function getInfos(parameter1, $parameter2){
    $data['infos']  = $this->my_model->get_infos($parameter1, $parameter2);

    $this->load->view('infos/information.php', $data);
}

如何在第一个视图（最初调用控制器的位置）中将 info/infomation.php 页面显示为模式弹出窗口。我希望有人能帮我解决这个问题。

谢谢。

Answer 1

为此，您需要使用 AJAX。这是一个示例代码。

<table id="tblTask" class="tblTasks">
    <tr>
      //I am showing my data here
    </tr>
 </table>

//Modal here
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body" id="showdata">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

 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];
          var createClickHandler = 
              function(row) 
              {
                  return function() { 
                            //code to get parameter 1 and 2
                             $.ajax({
                              type: "GET",
                              data: {parameter1: parameter1,parameter2 : parameter2},
                              url: <?php echo base_url() . "tasks/getInfos/",
                              success: function(data){
                              var d = $.parseJSON(data);
                              $.ajax({
                              type: "POST",
                              data: {data: d.data},
                              url: <?php echo base_url() . "infos/information.php",
                              success: function(info){
                               $("#showdata").html(info);
                               $("#myModal").modal("show"); 
                               },
                              });
                              }
                             });
                        };
              };

          currentRow.onclick = createClickHandler(currentRow);
      }
    });
}
window.onload = addRowHandlers();

在你的控制器中

public function getInfos(parameter1, $parameter2){
    $data['infos']  = $this->my_model->get_infos($parameter1, $parameter2);
    echo  json_encode(array(data=>$data));
}

这样，您需要首先将 AJAX 请求发送到控制器以获取信息，然后您需要将第二个请求发送到信息页面并从中获取响应。将此响应以 HTML 格式存储在您的模态正文中，并使用$("#myModal").modal('show');打开模态框

希望现在清楚了。