Динамическая подгрузка контента страницы
Добрый день, Василий!
У меня есть страница, содержимое которой формируется с помощью сниппета msProducts
Можно ли это сделать с минимальным переписыванием (а лучше вообще без него) уже существующего кода?
У меня есть страница, содержимое которой формируется с помощью сниппета msProducts
[[!msProducts? &tpl=`tpl.Preview` &limit=`10` &sortby=`publishedon`]]
Можно ли не просто ограничить вывод дочерних документов (&limit=`10`), но и сделать так, чтобы каждый раз при скроллинге (или нажатии на кнопку) подгружались еще 10 дочерних документов?Можно ли это сделать с минимальным переписыванием (а лучше вообще без него) уже существующего кода?
Комментарии: 13
Это вообще не зависит от сниппета.
Нужно писать javascript, который будет делать ajax запросы на сервер, загружать новые данные и вставлять в страницу.
Нужно писать javascript, который будет делать ajax запросы на сервер, загружать новые данные и вставлять в страницу.
Жаль… а было бы логично удобно, если бы сниппет это позволял. Спасибо за ответ.
modx.pro/development/39/ — это то, про что Вы говорите?
modx.pro/development/39/ — это то, про что Вы говорите?
Сниппет — это код на PHP, он в принципе не работает на стороне пользователя.
Тут в любом случае нужен javascript и css, чтобы оформить вывод.
Тут в любом случае нужен javascript и css, чтобы оформить вывод.
это то, про что Вы говоритеДа, примерно так должно работать.
Буду осваивать, спасибо.
Спасибо за ссылку.
вот modx.pro/development/39/#comment-12668
и вот modx.pro/development/39/#comment-12695
ваш рабочий вариант
и вот modx.pro/development/39/#comment-12695
ваш рабочий вариант
Володя, Василий, здравствуйте! Я попробовала использовать ваш код (http://modx.pro/development/39/#comment-12668), но не все в нем понимаю и потому не знаю, как правильно применить.
У меня получается сделать ajax-запрос (кликаю по кнопке — контент подгружается). Но в случае с пагинацией не все работает, как надо: при клике по любой странице кроме первой не контент подгружается, а открываются 2-я, 3-я и т.д. страницы подгружаемого ресурса (который, естественно, без шаблона, без стилей).
Использую для вывода пагинации pdoPage Василия.
Код сниппета [[Ajax]]
Код в подгружаемом ресурсе (пустой шаблон):
Код страницы, куда подгружается контент:
Мне в итоге нужно, чтобы или постраничная пагинация работала, или контент подгружался по мере прокрутки вниз или по клику на кнопку. Помогите, пожалуйста, разобраться! уже 3-й день голову ломаю ((
У меня получается сделать ajax-запрос (кликаю по кнопке — контент подгружается). Но в случае с пагинацией не все работает, как надо: при клике по любой странице кроме первой не контент подгружается, а открываются 2-я, 3-я и т.д. страницы подгружаемого ресурса (который, естественно, без шаблона, без стилей).
Использую для вывода пагинации pdoPage Василия.
Код сниппета [[Ajax]]
<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}
$action = $_POST['action'];
if (empty($action)) {return;}
$res = '';
switch ($action) {
case 'field33':
$param = array(
'element' => 'msProducts',
'offset' => (int)$_POST['offset'],
'limit' => (int)$_POST['limit'],
'depth' => $depth,
'parents' => (int)$_POST['parent'],
'includeContent'=> $includeContent,
'tpl'=> $tpl,
'outputSeparator'=> $outputSeparator,
'showUnpublished'=> $showUnpublished,
'showDeleted'=> $showDeleted,
'showHidden'=> $showHidden
);
$documents = $modx->runSnippet('pdoPage',$param);
return $documents;
}
if (!empty($res)) {
die($res);
}
Код в подгружаемом ресурсе (пустой шаблон):
[[!pdoPage?
&element=`msProducts`
&tpl=`tpl.LimoPreview`
&limit=`5`
&sortby=`publishedon`
&parents=`137`
]]
[[!+page.nav]]
Код страницы, куда подгружается контент:
[[!Ajax]]
<script type="text/javascript">
$(document).ready(function() {
/*$(document).on('click', 'a.load137', function(e) {
e.preventDefault();
jQuery(function($){
$('#loadcontent').load('[[~319]]'), {
action: 'field33',
parents: '3',
limit: '10',
};
});
});*/
var page = 1;
$(document).on('click', 'a.load137', function(e) {
e.preventDefault();
$.ajax({
url: "[[~319]]",
data: {"page": page},
success: function(data){
$('#loadcontent').append(data);
page = page + 5;
}
});
});
});
</script>
<a href="137" class="btn btn-default load137"><i class="icon icon-th"></i> Все</a>
<div id="loadcontent"></div>
Пробовала, как видите, два варианта вызова ajax. В примере Володи не поняла, какое действие оказывают параметры {action: 'field33', parents: '3', limit: '10'}, т.к. с ними и без них ничего не изменилось у меня.Мне в итоге нужно, чтобы или постраничная пагинация работала, или контент подгружался по мере прокрутки вниз или по клику на кнопку. Помогите, пожалуйста, разобраться! уже 3-й день голову ломаю ((
Да вы все в кучу смешали…
У вас у ссылок пагинации задан клас — load137?
У вас у ссылок пагинации задан клас — load137?
В кучу — скорее всего) Я впервые с этим пытаюсь разобраться. Где задается класс для ссылок пагинации? В параметрах вызова сниппета pdoPage?
Или вы про ссылку, при клике по которой подгружается контент? Если про нее, то класс задан
<a href="137" class="btn btn-default load137"><i class="icon icon-th"></i> Все</a>
Я не прошу решить за меня всю задачу, я прошу, если можно, подсказать, в каком направлении работать над ошибками)
В помощь — Автоматическая подгрузка контента при прокручивании страницыБу-га-га. «Видеоуроки доступны только нашим подписчикам» разве не умилительна защита, которую можно грохнуть парой кликов в фаербаге при том, что как бы целевая аудитория не может не знать о существовании последнего?
Дарья, вы jQuery в общих чертах знаете? И что такое post и get запросы? Там же на сайте увидел ruseller.com/lessons.php?rub_id=32&id=1389
Я не знаю, как в MS2 товары устроены, но вывод стандартных документов делал с этим плагином xozblog.ru/2013/01/infinite-scroll/ Это третья статья по счету по запросу «бесконечная загрузка jquery». первые две не смотрел, кликнул куда мышка пришлась.
Вам нужно
1 js функция, которая догружает контентЪ на страницу
2 php, который выдаст контент
3 пагинация
4 функция js, которая при клике на ссылку пагинации отменяет стандартное действие и отправляет запрос, подгружает
Как-то так.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.