页面时间为什么不会随着ajax调用更新？

Question

我创建了一个代码点火器应用程序，其中包括一个带有Ajax的页面。我本来以为Ajax页面是工作的，但是，我的页面中只有一个部分正在更新，其余部分仍然保持原样。

下面是控制器中的代码：index是在初始页面加载时调用的方法，当单击刷新按钮时调用的是index2()。

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


       public function index2()
       {
          $this->load->model('locations_model');
          $data['clienthistory'] = $this->locations_model->get_locations();
          return json_encode($data['clienthistory']);                                                                     
       }

以下是我的视图：

 <h2>timer test</h2>
    <?php echo now();?>

<h2>Latest Client Status</h2>
            <?php echo form_open('Dashboard/index');          
            echo form_submit('submit', 'Refresh Client Data', 'id="clientsubmit" class="btn-primary"');
            ?>
      <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>

     <?php echo form_close();  ?>
     <script type="text/javascript">
        $('#clientsubmit').click(function() {                   
               $.ajax({                                
                    url:"<?php echo site_url('Dashboard/index2'); ?>",
                    type: 'POST',
                    dataType: 'html'
                    success: function(returnDataFromController) {
                          $('#ajaxcontainer').html(returnDataFromController)
                    }
                  });

       return false;      
     });
    </script>

我想在页面上显示当前时间，但是该区域却不会随着我的ajax调用更新。此外，当我单击刷新按钮时，除了更新表数据之外，时间也在更新。我不确定为什么会这样。任何帮助，都将不胜感激。

Answer 1

Your button is a submit so it will refresh the page when clicked.

You need to change it to something else, like <a></a> and append a action to it, something like this:

<a href="#" id="clientsubmit" class="btn btn-primary">Refresh Client Data</a>

Since you are using twitter bootstrap, the link won't mess with your layout adding a btn to it's class.

Without the submit button, your page won't be refreshed and your date function will be intact.

And just for precaution, disable that link/button when clicked until the request is returned.

$('#clientsubmit').click(function() {
$(this).attr("disabled", "disabled");
...
$('#ajaxcontainer').html(returnDataFromController);
$(this).removeAttr("disabled");
...

And on your ajax call you will just update the ajaxcontainer element.

Hope it helps.