0

我只是想写我的第一个启用 ajax 的页面。不用说，我遇到了问题。而且我认为它揭示了对 ajax 应该如何工作的根本误解。这是我要完成的工作的描述。我有一个包含我数据库记录的表的页面。当用户单击我的刷新按钮时，我想重新查询数据库中的所有记录并在不刷新页面的情况下显示它们。这是我的控制器： 

  class Dashboard extends CI_Controller {

   public function __construct()
   {
          parent::__construct();           
          $this->load->helper('date');
          $this->load->helper('url');
   }

   public function index()
   {

          $this->load->model('locations_model');
          $emess = '';
          $data['clienthistory'] = $this->locations_model->get_locations();
          $data['main_content'] = 'dashboard';
          $this->load->view('includes/template', $data);

          $this->output->enable_profiler(TRUE);
   }

   public function index2()
   {

          echo('inside the getlatest method');

          $this->load->model('locations_model');
          $data['clienthistory'] = $this->locations_model->get_locations();

          //build HTML table to send back to view
          $data['latestdashboardHTML']= "<table class='table table-bordered table-striped'><thead>";
          $data['latestdashboardHTML']=$data['latestdashboardHTML'] & "<tr><th>IP</th><th>Name</th><th>Last Updated</th></tr></thead><tbody>"    ;     

      foreach ($data['clienthistory'] as $histitem)
      {
                 $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<tr>";              
                 $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['network'] & "</td>";
                 $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['name'] & "</td>";
                 $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "<td>" & $histitem['lastupdated'] & "</td>";
                 $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "</tr>";                    
          }

          $data['latestdashboardHTML'] = $data['latestdashboardHTML'] & "</tbody></table>";
          $data['main_content'] = 'dashboard';
             echo ($data['latestdashboardHTML'])   ;            

          $this->load->view($data['main_content'] );

   }
 }

这是我认为的代码：

<h2>Client Dashboard</h2>
<br/><p>
          <?php echo form_open('Dashboard/index');    

   echo form_submit('submit', 'Refresh Data', 'id="submit" class="btn-primary"');
   ?>
</p>
      <div class="row-fluid">
                 <div class="span12" id="ajaxcontainer">

                       <table class="table table-bordered table-striped">
                       <thead>
                              <tr>
                                     <th>IP</th>
                                     <th>Name</th>
                                     <th>Last Updated</th>

                              </tr>
                       </thead>
                       <tbody>
                              <?php foreach ($clienthistory as $histitem): ?>

                                  <tr>
                                     <td><?php echo $histitem['network'] ?></td>
                                     <td><?php echo $histitem['name'] ?></td>
                                     <td><?php echo $histitem['lastupdated'] ?></td>

                                  </tr>

                              <?php endforeach ?>

                       </tbody>
                       </table>


                 </div>

      </div><!--/row-->

<?php

          echo form_close();
?>

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bs-transition.js"></script>
<script src="../assets/js/bs-alert.js"></script>
<script src="../assets/js/bs-modal.js"></script>
<script src="../assets/js/bs-dropdown.js"></script>
<script src="../assets/js/bs-scrollspy.js"></script>
<script src="../assets/js/bs-tab.js"></script>
<script src="../assets/js/bs-tooltip.js"></script>
<script src="../assets/js/bs-popover.js"></script>
<script src="../assets/js/bs-button.js"></script>
<script src="../assets/js/bs-collapse.js"></script>
<script src="../assets/js/bs-carousel.js"></script>
<script src="../assets/js/bs-typeahead.js"></script>


   <script type="text/javascript">
   $('#submit').click(function() {
          alert('here');
          $.ajax({

                 url:"<?php echo site_url('Dashboard/index2'); ?>",
                 type: 'POST',
                 success: function(msg) {
                       alert(msg);
                       $('#ajaxcontainer').replaceWith(msg);
                 }
          });

          return false;       
   });
   </script>

问题：
第一次通过，页面加载正常。所有记录都显示正确的值。但是当我尝试刷新按钮时，javascript 执行，调用 index2 方法.. 但是它在第 22 行的视图中失败 - 这是我试图遍历 clienthistory 数组的地方。错误消息是：未定义变量：clienthistory。

所以这是我的问题。我认为 ajax 的工作方式是它只更新了页面的一部分。所以我想我不明白为什么要“重做”这部分视图。有人可以解释我做错了什么，更重要的是，如果我对 ajax 的理解是正确的。如果我可以将这两种方法合二为一，我也更喜欢它……我尝试过但遇到了一些问题，所以我最终只是将 index() 复制到 index2() 并使用它。

我注意到的另一种行为是标题“

客户仪表板

" 以及执行 ajax 方法时按钮显示两次。谢谢。

4

1 回答 1

1

我发现了我的问题。在 index2() 我再次加载视图。
我不应该重新加载视图。我只需要将 html 字符串传递给调用者。这部分解决了我的问题。

所以特别是在我的控制器中，我替换了：

      $this->load->view($data['main_content'] );

和

      return $htmlstring;

其中 $htmlstring 包含与 $data['latestdashboardHTML'] 相同的字符串

另一个问题是我需要指定我期望从控制器返回的数据类型。

所以我将以下行添加到我的 .ajax 函数中：

     dataType: 'html'

最后，我在网上某处读到，让控制器创建任何 HTML 都不是一个好主意。这应该是视图的工作。我想我会尝试将一个数组从控制器传递给视图。然后让 jquery 代码重新创建我的 div 的内容。谢谢

于 2012-06-12T12:32:27.047 回答