Carregue mais conteúdo com ajax ao clicar em mais links em uma exibição

Eu tenho uma visualização de bloco personalizada. Eu exibo os últimos 5 títulos de nós. Se alguém clicar no link mais, desejo carregar os próximos 5 títulos abaixo dos atuais 5 títulos do nó. Nenhuma atualização de página e não pager. Isso é possível? Como eu faria isso?

Portanto, este é um daqueles problemas que várias pessoas no mundo drupal tentaram resolver.

Recentemente, fiz uma apresentação sobre exatamente o mesmo problema e como realizá-lo com o drupal. Infelizmente, eu nunca postei nenhum dos meus slides em nenhum lugar onde o resto do mundo possa ver.

Aqui está o detalhamento dos módulos:

Rolagem infinita de visualizações

• Não funciona com o suporte ao Views Ajax - ele faz uma pequena solicitação ajax
• Faz uma solicitação de página inteira - Isso ocorre porque não usa a solicitação Views Ajax
• Requer visualizações 3.x - isso é uma vantagem, porque o pager é plugável na 3.x

Views Infinite Pager

• Exibições de suporte 2.x - Isso realmente não é uma coisa boa, porque o pager não pode ser plugado
• Como funciona com o 2.x, ele realmente corta o tema do pager, as exibições regulares do ajax e o comportamento de pré-processamento. Por isso, quebra algumas funcionalidades.

E por último mas não menos importante, é um novo projeto no qual acabei de adicionar à luz dessa pergunta. O motivo do projeto é minha necessidade de também precisar de visualizações que suportem mais carga, exceto pelos problemas mencionados acima que não são aceitáveis ​​para o meu projeto.

Visualizações carregar Mais

• Requer visualizações 3.x - isso é proposital.
• O suporte exibe opções regulares de pager, como deslocamentos, contagem de páginas
• Suporta totalmente o recurso ajax Views
  • Se o Ajax estiver ativado na exibição, o carregamento mais adicionará conteúdo ao final da lista
  • Se o ajax estiver desativado, a página atualizará e substituirá o conteúdo antigo pelo novo.
  • Ele não faz uma solicitação de página inteira ao fazer o retorno de chamada ajax, permite que as exibições façam um retorno de chamada natural e, em vez de substituir o conteúdo que ele anexa.
• Se você estiver usando o módulo de waypoint , a visualização poderá ser configurada para obter automaticamente novo conteúdo quando o usuário rolar para a parte inferior da página.
• Suporta efeitos JQuery (no momento, apenas o efeito fade é suportado, mais em breve).

espero que isso responda sua pergunta. Esta é a minha opinião "imparcial" ;-) em todas as visualizações carrega mais módulo.

Outro método usando https://github.com/paulirish/infinite-scroll no Drupal é transformar qualquer pager do Drupal em um autopager - pager de rolagem infinita - carrega mais pager .

Passo 1

Faça o download do jquery.infinitescroll.min.js em https://github.com/paulirish/infinite-scroll e coloque-o em /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Passo 2

Adicione o arquivo JavaScript ao arquivo .info do seu tema.

etapa 3

Crie um arquivo JavaScript personalizado /sites/all/themes/YOURTHEME/js/YOURTHEME.js que contenha o seguinte código.

/**
 * 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'
        }
      })
    })
  });
}

Passo 4

Adicione o CSS do carregador de rolagem infinito

#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;
}

Etapa 5

Verifique se a versão do jquery é mais recente que a 1.7.1. Use um dos métodos descritos em http://drupal.org/node/1058168 para instalar uma versão mais recente do jQuery no Drupal.

Não consigo adicionar um comentário na primeira resposta. Mas você deve adicionar o novo módulo: https://www.drupal.org/project/gd_infinite_scroll Este módulo permite transformar qualquer conteúdo e pager em um rolo infinito ou carregar mais pager.

Na página do módulo:

Forneça uma administração para usar o plug-in jQuery de rolagem infinita: pager automático em páginas personalizadas usando o pager. Você pode usar o carregamento automático na rolagem ou em um botão carregar mais.