Carica più contenuti con ajax quando fai clic su più link in una vista


15

Ho una vista a blocchi personalizzata. Visualizzo gli ultimi 5 titoli dei nodi. Se qualcuno fa clic sul collegamento più, voglio caricare i successivi 5 titoli sotto gli attuali titoli a 5 nodi. Nessun aggiornamento della pagina e non cercapersone. È possibile? Come potrei fare per fare questo?


Non ho una soluzione, ma qui ci sono un paio di link che potrebbero aiutare. Drupal Datasource e Drupal & Ajax , aggiornano dinamicamente un display drupal. che genera visualizzazioni come JSON. Questo tutorial di Lullabot mostra come usare jQuery in Drupal. Puoi guardare il codice di download per esempio su come implementarlo se non vuoi acquistare il video.
Adam S,

Visualizza lo scroll infinito per Drupal 8 non ha bisogno di alcuna libreria esterna, richiede solo il contenuto di cui ha bisogno, ha il supporto per i filtri esposti e può funzionare automaticamente o con la semplice pressione di un pulsante.
Sam152,

Risposte:


26

Quindi questo è uno di quei problemi che più persone nel mondo dei drupal hanno cercato di risolvere.

Di recente ho tenuto una presentazione su questo stesso identico problema e su come realizzarlo con Drupal. Purtroppo non ho mai pubblicato nessuna delle mie diapositive da nessuna parte dove il resto del mondo può vedere.

Ecco la suddivisione dei moduli:

Visualizzazioni Infinite Scroll

  • Non funziona con il supporto Ajax di Views - Si aggira attorno per fare la propria richiesta Ajax
  • Invia una richiesta a pagina intera - Questo perché non utilizza la richiesta Ajax di Views
  • Richiede Views 3.x - Questo è un vantaggio, perché il cercapersone è plug-in in 3.x

Visualizzazioni Infinite Pager

  • Support Views 2.x - Questa non è davvero una buona cosa, perché il cercapersone non è plug-in
  • Poiché funziona con 2.x, modifica in modo efficace il tema del cercapersone, le viste normali ajax e il comportamento di preelaborazione. Quindi interrompe alcune funzionalità.

E ultimo ma non meno importante è un nuovo progetto in cui ho appena aggiunto alla luce di questa domanda. Il motivo del progetto è la mia necessità di avere anche bisogno di visualizzazioni che supportino il caricamento di più, tranne le questioni sopra menzionate che non sono accettabili per il mio progetto.

Le visualizzazioni caricano di più

  • Richiede Views 3.x - Questo è di proposito.
  • Il supporto visualizza le normali opzioni del cercapersone, come offset, conteggio delle pagine
  • Supporta pienamente le funzionalità di visualizzazione Ajax
    • Se Ajax è abilitato nella vista, il caricamento di più aggiungerà contenuto in fondo all'elenco
    • Se ajax è disabilitato, la pagina verrà aggiornata e sostituirà il vecchio contenuto con il nuovo contenuto
    • Non esegue una richiesta a pagina intera quando esegue il callback ajax, consente alle visualizzazioni di eseguire il callback naturale e invece di sostituire il contenuto ad esso aggiunto.
  • Se si utilizza il modulo waypoint, la vista può essere configurata per ottenere automaticamente nuovi contenuti quando l'utente scorre fino alla fine della pagina.
  • Supporta effetti JQuery (al momento è supportato solo l'effetto dissolvenza, più presto a venire).

Spero che questo risponda alla tua domanda. Questa è la mia opinione "imparziale" ;-) su tutte le viste carica più modulo.


Siamo andati con Views Infinite Pager mentre siamo in vista 2. Proverò a far sì che il nostro progetto passi alle viste 3.
Lucy

Ho apportato alcune modifiche alla risposta per riflettere le nuove funzionalità aggiunte a views_load_more e anche per rimuovere tutti i riferimenti al progetto sandbox poiché questo è ora un progetto pienamente supportato su drupal.org
ericduran,

Lascia un commento su: VIS in D8 sul thread della domanda ^
Sam152,

2

Un altro metodo che utilizza https://github.com/paulirish/infinite-scroll in Drupal è trasformare qualsiasi cercapersone Drupal in un cercapersone automatico - cercapersone scroll infinito - caricare più cercapersone .

Passo 1

Scarica jquery.infinitescroll.min.js da https://github.com/paulirish/infinite-scroll e inseriscilo in /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Passo 2

Aggiungi il file JavaScript al file .info del tuo tema.

Passaggio 3

Crea un file JavaScript personalizzato /sites/all/themes/YOURTHEME/js/YOURTHEME.js contenente il seguente codice.

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

Passaggio 4

Aggiungi il CSS del caricatore a scorrimento 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;
}

Passaggio 5

Assicurati che la versione di jquery sia più recente della 1.7.1. Utilizzare uno dei metodi descritti in http://drupal.org/node/1058168 per l'installazione di una versione più recente di jQuery in Drupal.


1

Non riesco ad aggiungere un commento sulla prima risposta. Ma dovresti aggiungere il nuovo modulo: https://www.drupal.org/project/gd_infinite_scroll Questo modulo consente di trasformare qualsiasi contenuto e cercapersone in uno scroll infinito o caricare più cercapersone.

Dalla pagina del modulo:

Fornire un'amministrazione per utilizzare il plug-in jQuery scroll infinito: auto-pager su pagine personalizzate utilizzando il pager. È possibile utilizzare il caricamento automatico sullo scorrimento o un pulsante Carica altro.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.