[Yii Framework] Refresh Data Pada UI Tanpa Refresh Halaman (seperti Facebook and Twitter)

Jika kita lihat facebook dan twitter, maka kita sering melihat data status teman-teman kita yang akan terupdate secara otomatis sesuai data terbaru tanpa kita perlu me-refresh/reload halaman pada browser kita.. Saya akan coba memaparkan cara pembuatan seperti ini dengan menggunakan Yii Framework.. tidak tahu apakah metode yang digunakan sama dengan yang ada di FB/Twitter tapi tidak ada salahnya jika kita membuat hal yang serupa dengan pemikiran kita sendiri..

Jadi sebenarnya yang kita lakukan adalah me-refresh data dengan menggunakan AJAX seperti pada postingan sebelumnya dengan menggunakan interval waktu.. Hanya saja kita modifikasi perintahnya untuk merefresh data terbaru yang ada pada database.. Saya akan gunakan contoh kita me-refresh halaman admin agar CGridView yang ada senantiasa menampilkan data terupdate.  Saya asumsikan pada halaman admin terdapat CGridview seperti berikut :

<?php $this->widget('zii.widgets.grid.CGridView', array(
   'id'=>'category-grid',
   'dataProvider'=>$model->search(),
   'filter'=>$model,
   'columns'=>array(
      'data1',
      'data2',
       array(
          'class'=>'CButtonColumn',
       ),
   ),
)); ?>

Kemudian agar data bisa otomatis terupdate baik di refresh atau tidak, tambahkan script berikut pada bagian atas code view tersebut :

<script type="text/javascript">
  setInterval(   // fungsi untuk menjalankan suatu fungsi berdasarkan waktu
    function(){
        $.fn.yiiGridView.update('category-grid', {   // fungsi untuk me-update data pada Cgridview yang memiliki id=category_grid
        data: $(this).serialize()
    });
     return false;
 }, 
 10000  // fungsi di eksekusi setiap 10 detik sekali
);
</script>

Penjelasan : anda dapat melihat penjelasannya pada baris-baris tersebut..

Okeh, selesai…. Selamat mencoba..

Semoga membantu…