Difference between #9 and #8 of How to add ajax-loading indicators

unchanged
Title
How to add ajax-loading indicators
unchanged
Category
Tutorials
unchanged
Tags
AJAX
changed
Content
With yii you're able to create ajax requests and updates easily. 
But most times you always want to show a loading indicatior to your user.

Here's a simple (and good looking) solution for yii.
Basically we'll fade out all elements within a div to 80% opacity, while
displaying a loading indicator in the background.

The advantage of this solution is, that you don't have to add extra markup to
your page.

When performing the ajax request, add the .loading class to your, usually a div,
element. And remove it when the request is complete. 

You should put the following code in your view file:
~~~
[php]
<?php 
 echo CHtml::form();
 echo CHtml::ajaxButton (
   'DoAjaxRequest', //label
    '', // url for request
    array (
    'beforeSend' => 'function(){
      $("#myDiv").addClass("loading");}',
	'complete' => 'function(){
      $("#myDiv").removeClass("loading");}',
    )
 );
 echo CHtml::endForm();?>
~~~


The very slim CSS part of this recepie:
~~~
[javascript]
div.loading {
    background-color: #eee;
    background-image: url('loading.gif');
    background-position:  center center;
    background-repeat: no-repeat;
    opacity: 1;
}
div.loading * {
    opacity: .8;
}
~~~

### Links

[Russian Version](http://dbhelp.ru/how-to-add-ajax-preloader/page/)

[Chinese version](http://projects.ourplanet.tk/node/108)
[Thai
version](http://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1/25-oop--php-framework/1991-test-bootstrap-script-yii-framework-testting.html)