Динамическая подгрузка контента страницы

Добрый день, Василий!

У меня есть страница, содержимое которой формируется с помощью сниппета msProducts
[[!msProducts? &tpl=`tpl.Preview` &limit=`10` &sortby=`publishedon`]]
Можно ли не просто ограничить вывод дочерних документов (&limit=`10`), но и сделать так, чтобы каждый раз при скроллинге (или нажатии на кнопку) подгружались еще 10 дочерних документов?
Можно ли это сделать с минимальным переписыванием (а лучше вообще без него) уже существующего кода?
Дарья Сизова
13 января 2014, 13:07
modx.pro
1
3 070
0

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

Василий Наумкин
14 января 2014, 09:26
0
Это вообще не зависит от сниппета.

Нужно писать javascript, который будет делать ajax запросы на сервер, загружать новые данные и вставлять в страницу.
Володя
15 января 2014, 10:43
0
вот modx.pro/development/39/#comment-12668
и вот modx.pro/development/39/#comment-12695
ваш рабочий вариант
    Дарья Сизова
    26 января 2014, 12:18
    0
    Володя, Василий, здравствуйте! Я попробовала использовать ваш код (http://modx.pro/development/39/#comment-12668), но не все в нем понимаю и потому не знаю, как правильно применить.
    У меня получается сделать 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-й день голову ломаю ((
      Володя
      26 января 2014, 12:27
      0
      Да вы все в кучу смешали…
      У вас у ссылок пагинации задан клас — load137?
        Дарья Сизова
        26 января 2014, 12:46
        0
        В кучу — скорее всего) Я впервые с этим пытаюсь разобраться. Где задается класс для ссылок пагинации? В параметрах вызова сниппета pdoPage?
          Дарья Сизова
          26 января 2014, 13:19
          0
          Или вы про ссылку, при клике по которой подгружается контент? Если про нее, то класс задан
          <a href="137" class="btn btn-default load137"><i class="icon icon-th"></i> Все</a>
      Дарья Сизова
      26 января 2014, 13:20
      0
      Я не прошу решить за меня всю задачу, я прошу, если можно, подсказать, в каком направлении работать над ошибками)
        Антон Соловьёв
        26 января 2014, 13:44
        0
        В помощь — Автоматическая подгрузка контента при прокручивании страницы
        Бу-га-га. «Видеоуроки доступны только нашим подписчикам» разве не умилительна защита, которую можно грохнуть парой кликов в фаербаге при том, что как бы целевая аудитория не может не знать о существовании последнего?
        Дарья, вы 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, которая при клике на ссылку пагинации отменяет стандартное действие и отправляет запрос, подгружает

        Как-то так.
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          13