«Бесконечная» лента записей с ajax дозагрузкой на Yii

Опечатка: $this->processCurrentPage('page');
Надо: $this->processPageRequest('page');

Для автоматической подгрузки:

$(window).scroll(function()
{
    if (!loadingFlag)
    {
        if ($(window).scrollTop() == $(document).height() - $(window).height())
        {
            loadingFlag = true;
                    ...

                    // если достигли максимальной страницы, то прячем кнопку
                    if (page >= pageCount)
                        loadingFlag = true;
                }
            });
        }
    }
    return false;
})

Хмм, не уверен, где разместить loadingFlag = true;, который вначале.

у вас все равно $this->processCurrentPage('page'); стоит, такого метода нет в контроллере.

Сдейлайте в виде екстеншена

вот на примере инфинит скролла: http://www.yiiframework.com/extension/inifinite-scroll-pager

Здравствуйте. Спасибо за отличный пример. А какой у Вас action для _view? Мне не совсем понятно с выборкой.

Тогда во _view должно быть так?

<article>
<h2><?php echo Chtml::link($dataProvider->getUrl(), $dataProvider->title); ?></h2>
<?php echo $dataProvider->short; ?>
</article>

Спасибо, разобрался уже после того как спросил)

Здравствуйте. Прошу прощения, не слишком силен в yii. Допустим во время того, как пользователь осуществляет прокрутку ленты, добавляется несколько новых записей в базу. Будут ли при этом продублированы последние добавленные на страницу записи?

Подскажите пожалуйста, а как решить эту проблему? Может необходимо при первой загрузке страницы сохранить в javascript переменной время первой загрузки, и потом передавать его контроллеру, а из базы выбирать данные, у которых время добавления не позже переданного?

Спасибо)

Здравствуйте!
Спасибо за пример. Все сделал, работает. Данные подгружает, но Js не работает в подгруженных данных. Как побороть это?
У меня подгружаются картинки, с возможностью проголосовать за них, так вот это голосование не работает...

Спасибо! Попробую, отпишусь потом.

в views/post/_loop.php используется и jQuery и $
думаю стоит писать все в одном стиле

Спасибо за статью. Вопрос, почему когда нажимаю первый раз на "Показать ещё", он загружает новые 10 статей и по идеи в базе больше нет статей, но кнопка не исчезает и если нажать ещё то появляются те, к-е уже выводились.

Ещё показывает несколько раз "Показать ещё" после первого нажатия.

Подскажите, пожалуйста, почему JavaScript в Вашем примере не может воспользоваться Yii::app()->createUrl()?
Спасибо.

из Вашего же примера

$.ajax({
    type: 'post',
    url: window.location.href,
    data: {
        // передаём номер нужной страницы методом POST
    'page': page + 1,
    '<?php echo Yii::app()->request->csrfTokenName; ?>': '<?php echo Yii::app()->request->csrfToken; ?>'

Свою проблему решил. Вместо "_loopAjax", написал "_loop", поэтому не работало, исправил, теперь работает.

:)

Отличный пример. Вообще у Вас на сайте замечательный материал, уже нашел для себя много полезного и интересного. В случаях когда делают "бесконечную ленту" делают еще и догрузку новых записей в начало списка, естественно с помощью AJAX. Было бы здорово если бы Вы описали и этот нюанс.

Спасибо :)

Пожалуй это будет оптимальный вариант. Еще был вариант посмотреть в сторону "WebSockets", но поскольку технология еще не всеми браузерами поддерживается (или не всеми корректно), решил пока не углубляться в них.

Спасибо за подсказку.

Добрый день!
у меня вопрос возник, а как реализовать pagination так что бы он при переходе на следующий страницу или при нажатии на любую из страничек делалэто без перезагрузки страницы?

Есть один плохой момент, каждый раз при добавлении новых записей вместо добавления в список items, генерируется новый список.

<div class="posts" id="posts">
   <div id="yw0" class="list-view">
     <div class="items"></div>
   </div>
   <div id="yw0" class="list-view">
     <div class="items"></div>
   </div>
</div>

Может можете подсказать, как извлечь из data только div item?

Грузит последние два элемента с базы данных. Видимо нет никакой проверки на то что эти записи уже выводились. Помогите пожалуйста!

Грузит последние два элемента с базы данных снова и снова при прокрутке вниз*. Видимо нет никакой проверки на то что эти записи уже выводились. Помогите пожалуйста!

А все исправил.
if (page >= pageCount)
loadingFlag = true;
написал совсем в другом месте

Здравствуйте, сделал ленту, отлично работает и автору респект!
Столкнулся с тем что необходимо добавить пользовательский поиск, чтобы была возможность ввода параметров для поиска и вывод данных сохраняя при этом ленту, делал сначала форму путем добавления модели и формы, но вот по нажатию поиска столкнулся с проблемой как сделать вывод на основе атрибутов этого самого поиска? какие идеи есть по этому поводу?

Реализовал, все работает. Для примера из этой статьи
Перед $dataProvider в контроллере добавляем

$model=new Post;
$model->unsetAttributes();  // чистим атрибуты поиска
if(isset($_GET['Post']))
{
    $model->attributes=$_GET['Post'];
    $newDataProvider=$model->search();
    $criteria->mergeWith($newDataProvider->criteria);
}

Далее в контроллере меняем

$this->render('index', array(
    'dataProvider'=>$dataProvider,
));

на следующий код

$this->render('index', array(
    'dataProvider'=>$dataProvider,
    'model'=>$model,
));

и во вьюшке в данном случае views/post/index.php добавляем форму поиска через виджет CActiveForm

Подскажите пожалуйста, а как сделать, чтобы вначале при загрузке страницы не показывало ни одного блока, а при нажатии на кнопку уже выводило по три блока (или столько, сколько указано в размере "page")?

Не работает. На странице не выводит ни одного элемента, при этом есть надпись "показать еще". При нажатии на нее подгружается лоад-гифка и всё.

Контроллер:

if (Yii::app()->request->isAjaxRequest){
    $this->renderPartial('_loopAjax', array(
        'dataProvider'=>$dataProvider,
    ));
    Yii::app()->end();
}

Представление:

<ul class="catalog">
    <?php $this->renderPartial('_loop', array('dataProvider'=>$dataProvider)); ?>
</ul>

Соврал. Только при подгрузке у меня подгружаются не элементы,а весь layout

$this->processPageRequest('page');
        
$this->settings = User::model()->findByPk(1);
$main = Pages::model()->findByPk(1);

$dataProvider = new CActiveDataProvider('Product', array(
    'criteria'=>array(),
    'pagination'=>array(
        'pageSize'=>9,
        'pageVar' =>'page',
     ),
));

if (Yii::app()->request->isAjaxRequest){
    $this->renderPartial('_loopAjax', array(
        'dataProvider'=>$dataProvider,
    ));
    Yii::app()->end();
} else {
    $this->layout ='//layouts/catalog';
    $this->render('catalog',
       array(
          'dataProvider'=>$dataProvider,
          'main'=>$main,
       )
    );
}

С этим разобрался. Сейчас возникли проблемы связать это все еще с аякс-фильтром. Запутался уже) Буду очень благодарен небольшому примеру. Сейчас у меня так.
_loop.php:

<div id="listView">
<?
				$this->widget('zii.widgets.CListView', array(
				  'dataProvider'=>$dataProvider,
				  'ajaxUpdate'=>false,
				  'itemView'=>'item',
			    'template'=>'{items}{pager}',
			    'pager'=>array(
		            'htmlOptions'=>array(
	                'class'=>'paginator'
			            )
			        ),
			    'id'=>'ajaxListView',

				));
?>
</div>
<?php if ($dataProvider->totalItemCount > $dataProvider->pagination->pageSize && CHtml::normalizeUrl('')!=='/'): ?>
 
    <a id="showMore" class="more-catalog" href="">
                Показать еще
    </a>
    <script type="text/javascript">
        (function($)
        {

            $('.pager').hide();

            var page = parseInt('<?php echo (int)Yii::app()->request->getParam('page', 1); ?>');
            var pageCount = parseInt('<?php echo (int)$dataProvider->pagination->pageCount; ?>');
 
            var loadingFlag = false;
 $('.filter-check').change(function()
            {
                var inc = [];
                $('input[name="inc[]"]:checked').each(function() {inc.push($(this).attr('value'));});

                    $.ajax({
                        type: 'post',
                        url: '/catalog',
                        data: {
                            'inc': inc,
                            '<?php echo Yii::app()->request->csrfTokenName; ?>': '<?php echo Yii::app()->request->csrfToken; ?>'
                        },
                        success: function(data)
                        {
                            $('#listView').empty();
                            $('#listView').append(data);  
                        }
                    });
                return false;
            })
            $('.more-catalog').click(function()
            {
                var inc = [];
                $('input[name="inc[]"]:checked').each(function() {inc.push($(this).attr('value'));});
                if (!loadingFlag)
                {
                    loadingFlag = true;
                    $.ajax({
                        type: 'post',
                        url: '/catalog',
                        data: {
                            'page':page+1,
                           'inc':inc,
                            '<?php echo Yii::app()->request->csrfTokenName; ?>': '<?php echo Yii::app()->request->csrfToken; ?>'
                        },
                        success: function(data)
                        {
                            page++;                            
                            loadingFlag = false;                            
                            $('#listView').append(data);
                            if (page >= pageCount)
                                $('#showMore').hide();
                        }
                    });
                }
                return false;
            })


        })(jQuery);
    /*]]>*/
    </script>
 
<?php endif; ?>

_loopAjax:

<?php $this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider,
    'itemView'=>'item',
    'ajaxUpdate'=>false,
    'template' => "{items}",
)); ?>

контроллер:

  if (Yii::app()->request->isAjaxRequest){
            $dataProvider = $this->searchFilter();
            $this->renderPartial('_loopAjax', array(
                'dataProvider'=>$dataProvider,
            ));
            Yii::app()->end();
        }

Вроде выборка правильная, но проблема в том, что если кнопка "Показать еще" была нажата, то она больше не появится при фильтрации

И кнопка появляется в начале всегда (даже если элемента 3, при нажатии добавляются они же)

Ваш метод инфинит скролла имеет баг

Conditions: limitPage = 10, countItems = 11

Вы передаете page=2, Вам по идеи должно вернуть 1 item, но за пару сек. до этого кто то постит в ленту несколько сообщений в итоге вам вернется 9, 10, 11[id]
9, 10 - вернулись в первом запросе, получаем дублирование контента, решать этот вопрос средствами frontend это костыль.
Эту проблему нужно решать на уровне backend, солюшен состоит в том что бы передавать id последнего item со страници

В кондишенах имеем

$criteria->compare('id', $lastIdPrevPage, false, '>');

Спасибо!
Сразу интегрировал !!!!!!!!!!!!!1

Тут у меня проблема возникла, как вывести сообщения в обратном порядке после выборки из бд.
Вот критерии:

$criteria = new CDbCriteria;
$criteria->condition = '...';
$criteria->params = array(...);
$criteria->order = 't.created_at DESC';

$dataProvider = new CActiveDataProvider('UserMessages', array(
    'criteria'=>$criteria,
    'pagination'=>array(
       'pageSize'=>5,
    ),
));

Как видно из критерии сортировка идёт по desc, а как мне при рендере отсортировать сообщения по ACS, что-бы новые сообщения отображались последними в списке?
Может быть есть что-либо из коробки?
Пока не придумал ничего умнее чем:

   <?php $dataProvider->setData(array_reverse($dataProvider->getData()));?>
   <?php $this->renderPartial('_loop', array('dataProvider'=>$dataProvider)); ?>

Дмитрий, большое спасибо за пример. Всё отлично работает!
Подскажите, как организовать добавку /page/номер_страницы в url при нажатии кнопки "Показать ещё"?

Спасибо!

Скажите, а на сколько увеличивается нагрузка на сервер при таком подходе? Может быть лучше передавать только данные о постах в JSON, а потом уже javascript-ом их обворачивать в нужные дивы и вставлять? У меня просто проект где нагрузка на сервер будет немаленькая и вот думаю, делать способом как у Вас или все же передавать только данные в JSON, а уже остальную их обработку делать на javascript-ом. По логике нагрузку на сервер я таким образом сделаю немного меньше, но получается нехороший код тогда. Нужно, например, помимо php шаблона вывода поста делать шаблон для вставки данных в js. При изменении одного из них - надо менять второй. Ну и скорее всего в абсолютном выражении такой подход будет медленнее, ибо придется делать много замен в цикле в js. Чтобы из конструкции а-ля

%post_title%

%post_date%

получилась конструкция с именем и датой поста, которые пришли в JSON с сервера. Как думаете, какие еще моменты я не учел для выбора? На что еще стоит обратить внимание? Чтобы Вы посоветовали?

Что ничего лишнего не рендерится это понятно. Видимо, мне нужно было сразу сказать, что выводятся у меня не точно такие же посты как у Вас, а совсем другие данные. Так вот в этих данных, если делать через renderPartial, больше html кода, чем самих данных. Один элемент(аналог Вашего поста) у меня занимает 23 строки(примерно одинакового размера). Из них только 3 строки это данные с сервера, а остальное верстка. Относительно нагрузки на сервер у меня для одного элемента получается выбор: либо в JSON-е отправить эти 3 строки и обернуть их в верстку js-ом, либо грузить все 23 строки сразу с сервера, подождав пока отработает рендеринг. Теперь понимаете, что я имею в виду?

Добрый день,

В документации указано. что можно создавать Action, указав actionId:

http://www.yiiframework.com/doc/api/1.1/CController#createAction-detail

Но тут ничего не сказано о том, как передать туда параметры...

У меня 3 вопроса:

1. Можно ли сделать то, что я описал выше?
2. Есть ли более лояльный способ ajax переключения с actionCreate на actionUpdate. Обязательна поддержка загрузки картинок. Дело в том, что некоторые блоки формы должные открываться только после сохранения основной модели.
3. Возможно это лучше провернуть подменяя сценарии как то ?

Пока у меня такой быдлокод, но место , где я в isAjaxRequest блоке создаю action, не работает:

public function actionCreate()
  {
    if (Yii::app()->request->isAjaxRequest ) 
    {
      $model = new Hotels();
      if(isset($_POST['Hotels']))
      {
        $model->setAttributes($_POST['Hotels'], true);
        $model->save();

            // Вызов чужого контроллера и action 
     $p = Yii::app()->createController('sadmin/hotels'); // /update
            $act = $p[0]->createAction('update', ['id'=>$model->id]);
            $act->run();
      Yii::app()->end();
    }
    else
    {
      $model = new Hotels();
      $this->render('create',
        [
          'model'=>$model,
        ]);
    }

Нашел:

Yii::app()->runController('sadmin/hotels/update/id/1416');

Только почему то не работает в isAjaxRequest, только в основном блоке экшена.

Почему-то данный метод отрабатывает в основном теле экшена, но при isAjaxRequest ничего не генерируется(

public function actionCreate()
  {
    if (Yii::app()->request->isAjaxRequest 
    {
                        // Тут не работает  = (((
      Yii::app()->runController('sadmin/hotels/update/id/1416');
      Yii::app()->end();
    }
    else
    {
      $model = new Hotels();

                        // тут работает
      Yii::app()->runController('sadmin/hotels/update/id/1416');

      $this->render('create', ['model'=>$model,]);
    }
  }

Буду разбираться тогда, спасибо, что не прошли мимо!

Благодарю, пробую нечто подобное сделать, хочется fullAjax на старости лет)

А есть ли способ собрать action create и action update в один action без костылей вроде input type="hidden" и js-a , который подменяет значение этого поля?

ajaxSubmitButton на success ничего не возвращает:

echo CHtml::ajaxSubmitButton
            (
                $model->isNewRecord ? 'Добавить номера' : 'Обновить',

                Yii::app()->createUrl('sadmin/hotels/create'),
                [
                    'success'=>'js:function(data)
                        {
                            displayMessage(data);
                            $("#hotels-form").remove();
                            $("#crud-hotel").append(data);
                        }',
                    'error'=>'js:function()
                        {
                            alert("Плохо");
                        }',
                ],
                [
                    'id'=>'add-hotel',
                    'class'=>'btn btn-primary btn-lg center-block',
                ]
            );

Сама кнопка точно отрабатывает, если подкинуть в isAjaxRequest какие нибудь die($value), они возвращаются

Добрый день. А как такое сделать на Yii2? Что-то не выходит никак сделать)

Не выходит спрятать пагинацию и добавлять вывод по клику.

var page = parseInt('<?php echo (int)Yii::$app->request->get("page", 1); ?>');

возвращает NaN
Остальное, кажется, удалось победить

Все получилось, кроме вывода _loopAjax
Похоже, что вообще не срабатывает в контроллере if (Yii::$app->request->isAjax) - пробовал вывести var_dump и setFlash - тишина.
Страница передается, запрос формируется GET http://test.loc/shop/new?page=2
только гифка мигает... и кнопка пропадает. когда прокликиваю до конца.
И с токенами не разобрался - может в них дело?

Вот опять Я, привет Дмитрий.
Вопрос такой , мне нужен пример добавление комментариев с ajax , не обязательно древовидный.
Или статьи на эту тему, искал , но нашел не рабочие.
Подскажи где посмотреть наглядный пример

Как сделать, чтобы подгрузка блоков происходила заранее, а не по достижению блоком нижнего края окна браузера, т.е, как в соцсетях?

Елена, если Вы не понимаете сути бесконечной подзагрузки.... она собственно в том и заключается, чтобы \по достижению блоком нижнего края\ грузился новый контент. "Заранее" итак грузится первая \портянка\ можете её сделать небольшой, записей 50 (самый частый запрос), потом подгружать по 100... как вариант.
Всё остальное это CSS, JS ... вы там можете играться как угодно. в конце концов дайте прелоадер пользователю, чтобы он видел - идёт загрузка.

(у всех разная скорость прокрутки + разный контент)

Спасибо, уже давно сделала) А как сделать, чтобы при загрузке лайтбокса грузились не все миниатюры в диафильм, а например 50?
https://girls-art.photos/baleriny/#bwg90/34583

Добрый день, Дмитрий! Поясните, пожалуйста, почему мы используем в ajax запросе метод post? Если использовать метод get, то мы можем не использовать processPageRequest...

Подскажите
csrf всегда нужно отправлять в ajax запросах?
Что будет если его не оправить?
Что с ним делать в контроллере?
в yii2.

Здравствуйте. Вы не могли бы показать, как сделать загрузку без кнопки - при прокручивании до конца списка?

разобрался

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 500 && !loadingFlag)
        loadPhoto()
});

Дмитрий, здравствуйте. Вопрос, если используется ArrayDataProvider, можно ли как-то сделать бесконечный скрол (если на странице - статический контент с массива в гриде) ?