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 の理解が正しいかどうかを説明できますか? また、2つのメソッドを1つに組み合わせることができればそれを好むでしょう...試してみましたが、いくつか問題があったため、index()をindex2()にコピーして、それを操作するだけになりました。

私が気づいている他の動作は、タイトル「

クライアント ダッシュボード

" また、ajax メソッドを実行すると、ボタンが 2 回表示されます。ありがとうございます。

4

1 に答える 1

1

私は自分の問題を見つけました。index2（）で、ビューを再度ロードしています。
ビューをリロードしないでください。呼び出し元にhtml文字列を渡す必要があります。これは部分的に私の問題を解決します。

特に私のコントローラーで私は交換しました：

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

と

      return $htmlstring;

ここで、$htmlstringには$data['latestdashboardHTML']と同じ文字列が含まれています

もう1つの問題は、コントローラーから返されると予想されるdataTypeを指定する必要があることです。

だから私は私の.ajax関数に次の行を追加しました：

     dataType: 'html'

最後に、私はどこかでオンラインで読んだところ、コントローラーにHTMLを作成させるのは良い考えではありません。これがビューの仕事であると思われます。コントローラからビューに配列を渡そうとします。次に、jqueryコードでdivの内容を再作成します。ありがとう

于 2012-06-12T12:32:27.047 に答える