Ajax Busy Indicator


I want to add that busy indicator that f.e. appears when changing the page size of a CGridView to my view.

Thanks in advance

By default CGridView already has a loading indicator when it’s updating using AJAX. It’s controlled by the “grid-view-loading” CSS class.

Thanks for your reply. The CGridView reference was just an example. I have a table that updates using ajax when I change a drop-down list. The table needs some values to be calculated before they are shown, so I need the indicator during that update. What’s the best way to show the busy indicator?

The CGridView image is packaged up with the CGridView assets here.

If you want to use the same image for other parts of your site, the easiest option might be to copy the image into a web accessible images directory and create a javascript file for your site to handle the showing and hiding of the image under certain circumstances.

For a more encapsulated approach, you could create a widget to publish and output the loading image and surrounding HTML with a unique ID. The widget could also publish javascript and CSS files to handle the display of the image.

You could add in your main layout for instance a script that handles that, or in your external JS file if any. That script would use a couple of Ajax Events, see for instance:

You can add or remove any htmp entities/class upon an event

Yii::app()->clientScript->registerScript(‘search’, "

$(’.search-form form’).submit(function(){

$.fn.yiiGridView.update('l3answers-grid', {

           'success': function(data) {   // you can use whatever you want like complete, beforecomplete,etc

             addClass('somethinghere'); // remove class


	data: $(this).serialize()


return false;



see its documentation


and CGridview


Thanks all, I got it working.