Загрузить больше контента с помощью XSLT?

0

Довольно простая концепция. У меня есть разбитый на страницы источник данных, который подает содержимое на стену из кладки в блоках 15. Я хочу надеть кнопку "Загрузить еще".

Нужно ли загружать все DS и исключать разбиение на страницы, а затем просто маскировать его с помощью jQ? Похоже, он может стать лагги?

Как подключить эту функцию? Чтобы подавать только на выход XML, если он запросил? Я попытался кратко взять существующую кнопку Append из документов кладки, но мой код заставил ее работать как ссылка на страницу "NaN"... Я не слишком много смешал XSL и jQuery. Не знаю, с чего начать.. Ниже мой код для кнопки.

            <a href="{$root}/?page={/homepage-aritcles/pagination/@current-page + 1}">  <button id="append-button">++++ LOAD MORE POSTS ++++</button>   </a>

Здесь относительный js:

function getItemElement() {
  var elem = document.createElement('div');

  elem.className = 'item ' ;
    return elem;
}

$(function(){

      var $container = $('.post.content'),
          $boxes = $container.find('.item'),
          firstTime = true;

      $(window).smartresize(function(){

        var containerWidth = $container.width(),
            colWidth = Math.floor( containerWidth / 3 ),
            applyStyleFnName = firstTime ? 'css' : 'animate';


        $boxes.each(function(){
          var $this = $(this),
              cols = $this.data('cols'),
              boxWidth = Math.floor( colWidth * cols );

          $this[ 'css' ]({ width: boxWidth }, { queue: false });
        });


  $('#append-button').on( 'click', function() {
    var elems = [ getItemElement() ];
    $container.append( elems ).masonry( 'appended', elems );
  });
  • 0
    Не уверен, что среда. Это XSLT на стороне клиента?
Теги:
xslt
masonry
symphony-cms

1 ответ

1

Вы можете запросить вторую страницу результатов из вашего источника данных, установив параметр "Начало на странице" в переменную.

Итак, как вы написали "/? Page =" для вашего якоря, вы можете установить источник данных "start at page" на "{$ url- page}". Это можно сделать в пользовательском интерфейсе Symphony или путем редактирования вашего PHP файла источника данных.

Затем вы можете загрузить эту страницу с помощью ajax-запроса из jQuery.

Все параметры GET доступны на страницах Symphony как переменные, начинающиеся с "url-".

Вот базовый пример, вы хотите расширить его для таких вещей, как состояния загрузки и определения, нет ли загружаемых страниц.

Кнопка XSL (убедитесь, что она находится вне контейнера страницы ajax):

<a class="js-loadmore" data-current-page="{pagination/@current-page}" href="/?page={pagination/@current-page + 1}">Load More</a>

Page 1 разметка:

<div class="ajax-page">
  <p>I'm on page 1<p>
</div>

Page 2 разметка:

<div class="ajax-page">
  <p>I'm on page 2</p>
</div>

JS:

$('.js-loadmore').click(function(e) {
  e.preventDefault();
  var $btn = $(this),
      page = $btn.data('current-page') + 1,
      $dest = $('.ajax-page');

  $.ajax({
    url: '/?page=' + page,
    success: function(data) {

      // Find elements inside the container on the 2nd page and put them in the first page
      $(data).find('.ajax-page').children().appendTo($dest);

      // Update counter so subsequent clicks loads the next page
      $btn.data('current-page', page);

    }
  });

});

После нажатия...

<div class="ajax-page">
  <p>I'm on page 1<p>
  <p>I'm on page 2<p>
</div>
  • 0
    О, это похоже на то, что мне нужно ... Имеет смысл, что {$ root} пропал с якоря. Я попробую это позже и дам вам знать, что происходит! Вся концепция ajax является новой для меня.
  • 0
    @AcidX {$ root} может все еще быть необходим в зависимости от вашей среды, но в большинстве случаев он избыточен. Я оставил это для краткости.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню