Difference between #1 and #11 of
How to add ajax-loading indicators

Changes

Title unchanged

How to add ajax-loading indicators

Category unchanged

Tutorials

Yii version unchanged

Tags changed

AJAX

Content changed

[...]
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.
 
 
```php 
array(
 
 'ajax' => 
 
 
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();?>
```
[...]
}
~~~

 
### Links
 
 
[Russian Version](http://dbhelp.ru/how-to-add-ajax-preloader/page/)
23 0
25 followers
Viewed: 77 277 times
Version: 1.1
Category: Tutorials
Tags: AJAX
Written by: schmunk
Last updated by: Yang He
Created on: Sep 4, 2009
Last updated: 12 years ago
Update Article
Revert to #1 | Revert to #11

Revisions

View all history