Загружайте больше контента с помощью ajax, нажимая на ссылку больше в представлении

У меня есть пользовательский вид блока. Я отображаю последние 5 названий узлов. Если кто-то нажимает на ссылку «больше», я хочу загрузить следующие 5 заголовков под текущими заголовками 5 узлов. Нет обновления страницы и не пейджер. Это возможно? Как бы я поступил так?

Так что это одна из тех проблем, которые пытались решить многие люди в мире друпалов.

Недавно я выступил с докладом по точно такой же проблеме и о том, как этого добиться с Drupal. К сожалению, я никогда не публиковал свои слайды там, где остальной мир может видеть.

Вот разделение модулей:

Просмотры Бесконечный свиток

• Не работает с поддержкой Views Ajax - он взламывает свой собственный ajax-запрос
• Делает полный запрос страницы - это потому, что он не использует запрос Views Ajax
• Требуется Views 3.x - это плюс, потому что пейджер поддерживает 3.x

Представления Бесконечный Пейджер

• Поддержка Views 2.x - это действительно не очень хорошая вещь, потому что пейджер не подключаемый
• Поскольку он работает с 2.x, он действительно затрагивает тему пейджера, обычные представления ajax и поведение предварительной обработки. Так что это нарушает некоторые функциональные возможности.

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

Просмотры загружают Больше

• Требуется Views 3.x - Это специально.
• Поддержка просмотра обычных вариантов пейджера, таких как смещения, количество страниц
• Полностью поддерживает функцию просмотра AJAX
  • Если Ajax включен в представлении, загрузка больше добавит контент в конец списка
  • Если ajax отключен, страница обновится и заменит старый контент новым.
  • Он не выполняет полностраничный запрос при выполнении обратного вызова ajax, он позволяет представлениям делать естественный обратный вызов и вместо замены добавляемого к нему содержимого.
• Если вы используете модуль путевых точек, представление можно настроить так, чтобы оно автоматически получало новый контент, когда пользователь прокручивает страницу вниз.
• Поддерживает эффекты JQuery (сейчас поддерживается только эффект затухания, более скоро).

Надеюсь, что это ответ на ваш вопрос. Это моё "непредвзятое" ;-) мнение по всем видам загрузки ещё модуля.

Другой метод, использующий https://github.com/paulirish/infinite-scroll в Drupal - это преобразование любого пейджера Drupal в автопейджер - пейджер с бесконечной прокруткой - загрузка большего количества пейджеров .

Шаг 1

Загрузите jquery.infinitescroll.min.js с https://github.com/paulirish/infinite-scroll и поместите его в /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Шаг 2

Добавьте файл JavaScript в файл .info вашей темы.

Шаг 3

Создайте собственный файл JavaScript /sites/all/themes/YOURTHEME/js/YOURTHEME.js, содержащий следующий код.

/**
 * Implementation of autopager @see https://github.com/paulirish/infinite-scroll
 * All views that have the "autopager" class will have an autopager
 */
Drupal.behaviors.viewsInfiniteScroll = function(context) {
  $(function(){
    var $container = $('div.autopager div.view-content');    
    $container.imagesLoaded( function(){
      $container.infinitescroll({
        navSelector  : 'div.autopager .pager',    // selector for the paged navigation
        nextSelector : 'div.autopager .pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : 'div.autopager .views-row',     // selector for all items you'll retrieve
        loading: {
          finishedMsg: 'No more pages to load.',
          img: '/sites/all/themes/YOURTHEME/images/loading.gif'
        }
      })
    })
  });
}

Шаг 4

Добавьте CSS бесконечного загрузчика прокрутки

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 300px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Шаг 5

Убедитесь, что версия jquery новее 1.7.1. Используйте один из методов, описанных в http://drupal.org/node/1058168, для установки более новой версии jQuery в Drupal.

Я не могу добавить комментарий к первому ответу. Но вы должны добавить новый модуль: https://www.drupal.org/project/gd_infinite_scroll Этот модуль позволяет преобразовывать любой контент и пейджер в бесконечную прокрутку или загружать больше пейджеров.

Со страницы модуля:

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