Cargue más contenido con ajax al hacer clic en más enlaces en una vista


15

Tengo una vista de bloque personalizada. Muestro los últimos 5 títulos de nodo. Si alguien hace clic en el enlace más, quiero cargar los siguientes 5 títulos debajo de los títulos de 5 nodos actuales. Sin actualización de página y sin buscapersonas. es posible? ¿Cómo haría para hacer esto?


No tengo una solución, pero aquí hay un par de enlaces que podrían ayudar. Drupal Datasource y Drupal & Ajax , actualizan dinámicamente una pantalla drupal. que genera vistas como JSON. Este tutorial de Lullabot muestra cómo usar jQuery en Drupal. Puede ver el código de descarga, por ejemplo, cómo implementarlo si no desea comprar el video.
Adam S

Views scroll infinito para Drupal 8 no necesita ninguna biblioteca externa, solo solicita el contenido que necesita, tiene soporte para filtros expuestos y puede funcionar automáticamente o con solo presionar un botón.
Sam152

Respuestas:


26

Este es uno de esos problemas que varias personas en el mundo de Drupal han intentado resolver.

Recientemente hice una presentación sobre este mismo problema y cómo lograrlo con drupal. Lamentablemente, nunca publiqué ninguna de mis diapositivas en ningún lugar donde el resto del mundo pueda ver.

Aquí está el desglose de los módulos:

Vistas Desplazamiento infinito

  • No funciona con el soporte de Views Ajax: piratea alrededor para hacer su propia solicitud ajax
  • Realiza una solicitud de página completa: esto se debe a que no utiliza la solicitud de Views Ajax
  • Requiere Vistas 3.x: esta es una ventaja, ya que el localizador se puede conectar en 3.x

Views Infinite Pager

  • Vistas de soporte 2.x - Esto realmente no es algo bueno, porque el localizador no es conectable
  • Debido a que funciona con 2.x, realmente piratea el tema del buscapersonas, las vistas regulares ajax y el comportamiento de preprocesamiento. Entonces rompe alguna funcionalidad.

Y por último, pero no menos importante, hay un nuevo proyecto en el que acabo de agregar a la luz de esta pregunta. La razón del proyecto es mi necesidad de también necesitar vistas que admitan cargar más, excepto los problemas mencionados anteriormente, no somos aceptables para mi proyecto.

Vistas cargar más

  • Requiere Vistas 3.x - Esto es a propósito.
  • El soporte visualiza las opciones de buscapersonas regulares, como compensaciones, recuento de páginas
  • Totalmente compatible con la función de vistas ajax
    • Si Ajax está habilitado en la vista, la carga más agregará contenido al final de la lista
    • Si ajax está deshabilitado, la página se actualizará y reemplazará el contenido anterior con el nuevo contenido
    • No hace una solicitud de página completa cuando se realiza la devolución de llamada ajax, permite que las vistas lo hagan es una devolución de llamada natural y en lugar de reemplazar el contenido que se le agrega.
  • Si está utilizando el módulo waypoint , la vista se puede configurar para obtener automáticamente nuevo contenido cuando el usuario se desplaza hacia la parte inferior de la página.
  • Admite efectos JQuery (en este momento solo se admite el efecto de desvanecimiento, más pronto).

Espero que esto responda a su pregunta. Esta es mi opinión "imparcial" ;-) en todas las vistas cargar más módulo.


Fui con Views Infinite Pager ya que estamos en las vistas 2. Intentaremos que nuestro proyecto suba a las vistas 3.
Lucy

Hice algunos cambios en la respuesta para reflejar las nuevas características agregadas a views_load_more y también para eliminar toda referencia al proyecto de sandbox ya que este es ahora un proyecto totalmente compatible en drupal.org
ericduran

Dejó un comentario re: VIS en D8 en el hilo de preguntas ^
Sam152

2

Otro método que usa https://github.com/paulirish/infinite-scroll en Drupal es transformar cualquier localizador Drupal en un localizador automático - localizador de desplazamiento infinito - cargar más localizador .

Paso 1

Descargue jquery.infinitescroll.min.js desde https://github.com/paulirish/infinite-scroll y póngalo en /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Paso 2

Agregue el archivo JavaScript al archivo .info de su tema.

Paso 3

Cree un archivo JavaScript personalizado /sites/all/themes/YOURTHEME/js/YOURTHEME.js que contenga el siguiente 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'
        }
      })
    })
  });
}

Etapa 4

Agregue el CSS del cargador de desplazamiento 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;
}

Paso 5

Asegúrese de que la versión jquery sea más reciente que la 1.7.1. Utilice uno de los métodos descritos en http://drupal.org/node/1058168 para instalar una versión más reciente de jQuery en Drupal.


1

No puedo agregar un comentario sobre la primera respuesta. Pero debe agregar el nuevo módulo: https://www.drupal.org/project/gd_infinite_scroll Este módulo le permite transformar cualquier contenido y buscapersonas en un desplazamiento infinito o cargar más buscapersonas.

Desde la página del módulo:

Proporcione una administración para usar el plugin jQuery de desplazamiento infinito: localizador automático en páginas personalizadas utilizando localizador. Puede usar la carga automática en el desplazamiento o un botón cargar más.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.