Загрузка представления как модального всплывающего окна в CodeIgniter

Question

Я новичок в CodeIgniter, а также новичок в веб-приложении MVC. У меня проблема с отображением страницы 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 контроллеру для получения информации, затем вам нужно отправить второй запрос на страницу Info и получить от него ответ. Сохраните этот ответ в своем модальном теле как HTML и откройте модальное окно, используя $("#myModal").modal('show');

Надеюсь, теперь это ясно.