schmunk
Yang HeYou are viewing revision #5 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.
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
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;
} ~~~
User Contributed Notes 5
Thanks but..
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！
Thanks!
Just what I was looking for!
$.ajaxStart is better
can show an ajax throbber for every request. you don't have to change your files. use ajaxStop as well
specify width and height to dispaly image
thanks but it worked for me by adding width and height css properties
div.ajaxloading { height: 32px; width: 32px; background-color: #fff; background-image: url('ajaxloader.gif'); background-position: center center; background-repeat: no-repeat; opacity: 1; } div.ajaxloading * { opacity: .8; }Really helpful - thanks!
What I like to do is call a function in my preloaded js file because i'm not really a fan of too much inline javascript.
'beforeSend'=>'preAjax','complete'=>'postAjax'In js/myapp.js
function preAjax(){console.log('hola');}Leave a comment
If you have any questions, please ask in the forum instead.
Join the conversation to share a note.