Создаем ленту новостей Ajax в Yii

Добавлено пользователем 12.01.2016

ajax yii

Часто на сайтах можно встретить вывод списка новостей в виде ленты, которая бесконечно подгружается. В некоторых случаях подгрузка происходит автоматически, в некоторых – ленту необходимо подгружать вручную, например, с помощью кнопки «Показать ещё». Необходимо с помощью Yii Ajax подгружать записи. Для начала разберем работу Ajax списка ClistView. Здесь мы выполняли только одну операцию – actionIndex() и единственное для него представление index. php. Но возможен вариант, когда нужно вывести записи из категории, по тегу, по дате и т. д. Для всего этого используются собственные шаблоны index. php, date. php и т. д., но имеют общий список.

Выносим формирование списка в отдельный файл _loop.php. Теперь все списки выводятся нормально и переход по страницам осуществляется по Ajax. Но в этом варианте есть несколько недостатков. Ajax запрос переходит по ссылкам, прописанным в списке номеров страниц.

Ajax-обработчик выделяет код своего списка из всего HTML-содержимого. При Ajax запросе контроллер возвращает не всю страницу в шаблоне, а лишь код списка. Поскольку ранее мы вынесли список в отдельный файл _loop.

php, генерируем только его вызвав $this->renderPartial(_loop, array()): Теперь при выполнении Ajax запроса возвращается только список. Теперь контроллера способен оптимизировать работу при Ajax запросах.

Теперь начнем организацию ленты:
• Создаем блок ;
• Выводим список первых 10 новостей;
• В случае включенного JavaScript, скрываем навигатор, отображая кнопку «Показать ещё»;
• Запоминаем в JavaScript индекс текущей страницы
• Навешиваем на эту кнопку функцию-обработчик, который по клику увеличивает номер текущей страницы на единицу и загружает новую порцию записей
• На последней записи (page>=pageCount) скрываем кнопку. Теперь добавляем индикацию процесса загрузки. Это представление должно выводиться только один раз и подгружать список. Помимо того, что мы переименовали _loop в _loopAjax в контроллере, проводим несколько изменений.

В зависимости от того, какой роут используем, при построении ЧПУ, меняем расположение номер страницы в URL. JavaScript код не использует функцию Yii::app()->createUrl(), для генерирования ссылки. Передаем в POST запросе, отправленном на адрес window. location. href и выполняем подмену $_GET['page']=$_POST['page']. Чтобы не использовать по умолчанию параметр Post_page. указываем имя параметра page в поле pageVar.

В конце получаем ленту, которая подгружает записи по щелчку мыши. Чтобы загрузка новых записей выполнялась автоматически, выполняем замену обработчика щелчка $(#showMore).click() обработчиком прокрутки страницы $(html).scroll().

Похожие посты:

Как обеспечить php защиту от подмены cookies
Работаем с глобальными переменными php
Связь php с базой данных MySQL. Подключение к MySQL серверу

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Important: If you add a link to your comment it will not be published.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>