Кнопка "показать еще " без перезагрузки страницы.

Сейчас в вкратце опишу принцип работы кнопки «Показать еще». Данный пример используется с связки с Ditto, но можно также использовать с чем то другим что передает на отображение товаров в GET запросах.
1)Создаем чанк для Ditto кнопку «Показать еще», а именно «Next» назовем чанк tplPaginateNext
<a href="[+url+]" class="modx_evo_podbotrrrrr">Показать еще</a>

2)Размещаем вызов Ditto и пагинации. Указываем id блока товара blockinner и также на блок пагинации id navigation

	
<div class="like__container" id="blockinner">
						
[[Ditto? 
&tpl=`sopyt_tovar_tpl` 
&parents=`2` 
&orderBy=`menuindex ASC`
&showInMenuOnly=`1`  
&paginate=`1` 
&display=`20`
&id=`catalog`
 &tplPaginateNext=`tplPaginateNext`
&noResults=`Пока нет новостей`
]]
						
</div> 
										<div class="more" id="navigation">
[+catalog_next+]
</div>


3)Пишем скрипт на js и размещаем в конце футора указываем

<script>
function modx_evo_event_button_more(){
	$("#navigation a").unbind("click").on("click", function(e) {
        e.preventDefault();
		$.ajax({url:$(this).attr('href'), success: function(data){
			$("#blockinner").append($("#blockinner", data).html());	
			$("#navigation").html($("#navigation", data).html());
			modx_evo_event_button_more();
		}});
    });
}
$(document).ready(function() {
modx_evo_event_button_more();
});
<script>

8 комментариев

avatar
Позволю себе озвучить несколько моментов:
1. Необязательно делать unbind(), если потом делаете e.preventDefault();
2. Делать лучше так: e.preventDefault(e); чтобы корректно работало в FF.
3. При ajax-запросе хорошо бы было обрабатывать не только success.
4. Не знаю как ведёт себя Ditto (пользуюсь DL), но когда будет последняя страница, возможно, блок [+catalog_next+] не отобразится, что тоже нужно проверить.
5. Ну и про bind'ы для динамически добавляемых элементов — не забываем про «всплывание», поэтому корректнее будет написать так:
$('body').on('click', "#navigation a", function(e) {}
  • EGO
  • +1
avatar
почему не отобразить? вы передаете в аджакс гет запрос который производит операцию с пхп и выдает результат. все коректно работает. ну поставте клик если вам так угодно.Только не вижу смысла, что вы написали.«Аби не мовчки»
Комментарий отредактирован 2017-11-14 17:58:01 пользователем hreshnik
avatar
Очевидно, что сейчас рекомендуется делать так
$(document).on('click', "#navigation a", function(e) {}
avatar
Можно использовать infinitescroll где угодно, как угодно, в чем угодно, сколько угодно (чтобы не писать велосипед =))
avatar
К вопросу о Infinite Scroll — ненавижу страницы, которые нельзя промотать до конца :)
avatar
Не не, там можно по триггеру на кнопку сделать, как и нужно автору =)
avatar
Беда в том, что это используют пару процентов, остальные фигачат по «докрутке» и вызывают мою лютую неприязнь :))))
avatar
Если у кого то есть готовое решение «показать ещё» для eFilter, поделитесь пожалуйста.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.