Client Dashboard

Question

我只是想编写我的第一个启用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（）并且正在使用它。

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

Client Dashboard

”以及按钮在执行ajax方法时出现两次。感谢。

Answer 1

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

所以在我的控制器中我特意更换了：

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

与

      return $htmlstring;

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

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

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

     dataType: 'html'

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

Ajax页面因未定义的变量错误消息而失败

Client Dashboard

1 个答案: