Yii Framework Forum: Ajax loading di CGridView - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Ajax loading di CGridView Minta solusinya donk... Rate Topic: -----

#1 User is offline   anggara 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 19-July 11

Posted 25 September 2011 - 10:46 AM

Bahasa Inggris ane blepetan, makanye ane mendingan kemari, ke kampung asli ane....

So, mudah2an juragan-juragan yang dah lama pake Yii bisa bantuin ane. Pertanyaannye:

Di CGridView, kalo kite ngelakuin aksi filtering ato sorting kolom kan ada fitur AJAX loading-nye tuh (yang ngeluarin animasi GIF muter-muter). Nah, gimane caranye modifikasi fitur ini supaye bisa dipindahin ke jendela jQuery UI Dialog modal, supaya ane bisa nge-blok interaksi user pas CGridView nge-loading data pake AJAX...? Soalnye, pas koneksi ke aplikasi Web ane lambat, takutnya user bengong, koq aksi die gak di-respon apa-apa ama aplikasi Web ane.... begichu...

Kalo bisa, kalo bisa nih... Minta resep praktis plus demo-nya aja dah... (kalo bisa bikinin ekstensinya skalian... hehehe).... Soalnye ane beneran baru nih...
0

#2 User is offline   rei 

  • Advanced Member
  • PipPipPip
  • Yii
  • Group: Members
  • Posts: 309
  • Joined: 10-November 10
  • Location:Cimahi

Posted 25 September 2011 - 01:27 PM

View Postanggara, on 25 September 2011 - 10:46 AM, said:

Nah, gimane caranye modifikasi fitur ini supaye bisa dipindahin ke jendela jQuery UI Dialog modal, supaya ane bisa nge-blok interaksi user pas CGridView nge-loading data pake AJAX...?


Mungkin bisa memanfaatkan beforeAjaxUpdate dan afterAjaxUpdate di CGridView? Dialognya dibuka sebelum ajax update dan ditutup setelahnya.
0

#3 User is offline   ibiz4 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 151
  • Joined: 26-November 10
  • Location:Indonesia

Posted 25 September 2011 - 06:05 PM

Bikin class CSS atur ukuran biar nutupin halaman lalu atur z-indexnya biar berada pada stack paling depan.
trus set class CSS itu di opsi 'loadingCssClass'=>yourClass
WYSIWYG
(What Yii Serve is What You Get)
0

#4 User is offline   anggara 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 19-July 11

Posted 26 September 2011 - 11:27 AM

Itu baru namanya pencerahan....!

Sip..

Trims, rei. Sarannya ane pake. Buat ibis4, trims juga...

Hasil:

Attached File  Image 1.png (30.11K)
Number of downloads: 28
0

#5 User is offline   anggara 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 19-July 11

Posted 27 September 2011 - 12:48 AM

Eitttt... tapi masih ada masalah ni bro...!

Masalahnya, gw pake kode ini untuk kustomisasi grid dan munculin CJuiDialog:

<?php
$this->widget('zii.widgets.grid.CGridView', array(
    'id' => 'glco-grid',
    'dataProvider' => $model->search(),
    'filter' => $model,
    'beforeAjaxUpdate' => 'js: function() {
        $("#loading-dialog-id").dialog("open");
    }',
    'afterAjaxUpdate' => 'js: function() {
        $("#loading-dialog-id").dialog("close");
    }',
    'columns' => array(
        'co',
        'name',
        'addr1',
        'addr2',
        'city',
        'cntry',
        'zip',
        'tel',
        'fax',
        'email',
        'http',
        array(
            'name' => 'glchart_id',
            'value' => '$data->glchart->description',
            'filter' => $model->options('glchart_id'),
        ),
        array(
            'name' => 'mccurr_id',
            'value' => '$data->mccurr->description',
            'filter' => $model->options('mccurr_id'),
        ),
    ),    
));
?>

<?php
        $this->beginWidget('zii.widgets.jui.CJuiDialog', array(
            'id'=>'loading-dialog-id',
            'options'=>array(
                'dialogClass'=>'loading-dialog',
                'autoOpen'=>FALSE,
                'closeOnEscape'=>FALSE,
                'draggable'=>FALSE,
                'resizable'=>FALSE,
                [b]'modal'=>TRUE,[/b]
                'show'=>'fade',
                'hide'=>'puff',
                'width' => 145,
                'height'=>145,
                'buttons'=>array(),
            ),    
            'theme'=>'ui-darkness',
        ));
        echo "<div class='loading-indicator'></div>";
        $this->endWidget('zii.widgets.jui.CJuiDialog'); 
?>



Masalahnya baru ketemu pas lagi nyoba web app ane di browser Chrome. Tapi kalo nyoba di FireFox gak masalah.

Untuk grid yang kolom filter-nya pake Dropdown gak masalah. Tapi yang filter yang pake Text masalah (Ni semua maksudnya filter yang nempel di grid, bukan yang di form "Advanced Search" bawaan hasil generate Gii). Yakni, pas salah satu kolom di-filter di kolom yang pake Text (memicu "beforeAjaxUpdate" dulu kan?), koq CJuiDialog "meneng bae" (nongol, nutup, tapi OVERLAY CJuiDialog masih ngeblok user. Padahal kan harusnya OVERLAY otomatis ilang). Itulah masalahnya.

Tapi pas gw coba ubah definisi MODAL dari CJuiDialog menjadi FALSE gak da masalah. Tapi kan jadi gak enak diliat tampilannya. Lagipula jadi gak ngeblok user donk....

Plis para master, bantuin ane lah....!
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users