How to add ajax-loading indicators
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:
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:
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
Total 6 comments:
where should i add this lines of code
Vikram, you should put this in your view file.
I change into:
public function actionClientselect()
{
$data=clients::model()->findAll('departmentID=:departmentID',
array(':departmentID'=>$_POST['departments']));
foreach($data as $v)
{
echo CHtml::tag('option',
array('value'=>$v->clientID),CHtml::encode($v->client),true);
}
}
cause the CHtml(71)get out a mistake.. work well now thanks！
i'm new to this kind of programming so i'm sorry if i asked many questions...
where should i put the css? is it in the same file or another file and how? if put in another file, put in where?
thanks.
where should i put the css? Does not matter as long as it's included in your page.
That's exactly what I needed. I looked all day in the forum. Of course I did it writing my own jquery script, but wanted to know how it is made the Yii way :)