Последняя стабильная версия: 1.1.9

Рецепты

Система Orphus

Индикаторы AJAX-загрузки

Используя Yii довольно просто использовать ajax запросы. Чаще всего необходимо показать пользователю, что запрос находится в процессе выполнения.

Приведём простой и красивый пример, как этого достичь. Загружаемый элемент будем отображать с прозрачностью в 80% и картинкой, показывающей, что идёт загрузка.

Плюс решения в том, что не придётся добавлять дополнительную разметку.

При выполнении запроса будем добавлять класс .loading к обновляемому элементу. После выполнения запроса класс будем убирать.

Добавляем в наш файл отображения:

<?php
echo CHtml::form();
echo CHtml::ajaxButton (
    'DoAjaxRequest', // заголовок
    '', // url запроса
    array (
        'beforeSend' => 'function(){
            $("#myDiv").addClass("loading");
         }',
        'complete' => 'function(){
            $("#myDiv").removeClass("loading");
        }',
    )
);
echo CHtml::endForm();
?>

Добавим немного CSS к нашим стилям:

div.loading {
    background-color: #eee;
    background-image: url('loading.gif');
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 1;
}
 
div.loading * {
    opacity: .8;
}