Подгрузка контента

Sergey
Sergey
3,3K
7
Содержание:
  1. Комментарии
Приветствую!
Подскажите, как реализовать такой же как у Вас на сайте «механизм» подгрузки контента при нажатии на кнопку (Загрузить ещё)?

Комментарии: 7

  1. Александр Мальцев
    Александр Мальцев
    2017-05-11 17:07:58
    Вы хотите узнать, как это реализовать на PHP или на какой-нибудь CMS?
  1. Sergey
    Sergey
    2017-05-11 17:51:44
    Интересна реализация на MODx
  • Александр Мальцев
    Александр Мальцев
    2017-05-12 12:00:07
    В MODX это очень просто осуществить с помощью сниппета pdoPage из пакета pdoTools. С его помощью можно представить результат (если количество строк в нём больше минимального) в виде страничной пагинации или с подгрузкой посредством AJAX.
    Вот пример, как можно организовать подгрузку контента (всех тикетов) с помощи кнопки «Загрузить ещё»:
    <div id="pdopage">
      [[!+page.nav]]
      <div class="rows">
        [[!pdoPage?
          &element=`getTickets`
          &action=`tickets`
          &tpl=`tpl.Tickets.list.row`
          &parents=`0`
          &limit=`5`
          &maxLimit=`5`
          &ajaxMode=`button`
          &nestedChunkPrefix=`tickets_`
          &ajaxTplMore=`@INLINE <button class="btn btn-default btn-more">Загрузить ещё</button>`
        ]]
      </div>
    </div>
    
  • Sergey
    Sergey
    2017-05-12 12:37:58
    Благодарю за оперативный ответ и помощь. Создаю портфолио дизайн-работ и такая реализация очень поможет.
    Спасибо, всех благ!
    P.S.
    Неплохой тутор получился бы в коллекцию уроков Вашего сайта.
  • dimitri
    dimitri
    2017-10-01 16:35:29
    что-то не получается… Вообще ни чего не выводится

    	<section class="s-yslygi inverse yslygi ha-waypoint" id="s-yslygi" data-animate-down="ha-header-show" data-animate-up="ha-header-hide" style="background-image: url(assets/app/img/fon_yslyg.jpg);">
    	 	<div class="wrapp">
    	 		<div class="container">
    	 			<div class="row">
    	 				<div class="col-md-12">
    	 					<h2>Проводимая терапия</h2>
    	 				</div>
    	 			</div> 
    	 			<div class="row"> 
    		 			<div class="col-md-12">
    			 			<ul class="ajax-container">
                      [[!pdoPage?
                      &element=`getTickets`
                      &action=`tickets`
                      &nestedChunkPrefix=`tickets_`
    	 	 &parents=`20`
    	 	&depth=`0`
    	 	 &tpl=`ysItem`
    	  &includeTVs=`image, opisanie_v, cenays, scidca`
    	 &processTVs=`image, opisanie_v, cenays, scidca`
    	 							  &limit=`6`
    	 							  &ajaxMode=`button`
                      &ajaxTplMore=`@INLINE <button class="btn btn-default btn-more">Загрузить ещё</button>`
    	 							  ]]
    
    			 			</ul>
    					
    					</div>
    					 
    	 			</div>
    	 					<div class="row">
    		 				<div class="col-md-12">
    	 					<div class="welcome-boton">
    									[[!+page.nav]]
    								</div>
    						</div>
    						</div>		
    	 				
    	 			</div>
    	 	</div>
    	 </section>
    
  • Valdiss
    Valdiss
    2022-09-07 07:59:11
    Добрый день, Александр, браузер пишет в консоли — You must load jQuery for using ajax mode in pdoPage. Получается pdopage через ajax только через jquery работает? Не хочу его только для этого устанавливать, есть вариант использования без этой библиотеки?
  • Александр Мальцев
    Александр Мальцев
    2022-09-07 11:51:48
    Добрый день! Да, там всё написано с использованием jQuery. Можно реализовать всё самостоятельно, без pdoPage и без jQuery. Написать свой сниппет и свой клиентский скрипт на чистом JavaScript.