Laden Sie mehr Inhalte mit Ajax, wenn Sie auf mehr Links in einer Ansicht klicken


15

Ich habe eine benutzerdefinierte Blockansicht. Ich zeige die letzten 5 Knotentitel an. Wenn jemand auf den weiteren Link klickt, möchte ich die nächsten 5 Titel unter den aktuellen 5 Knotentiteln laden. Keine Seitenaktualisierung und kein Pager. Ist das möglich? Wie würde ich das machen?


Ich habe keine Lösung, aber hier sind ein paar Links, die helfen könnten. Drupal Datasource und Drupal & Ajax aktualisieren dynamisch eine Drupal-Anzeige. welches Views als JSON ausgibt. Dieses Lullabot-Tutorial zeigt, wie man jQuery in Drupal verwendet. Sie können sich den Download-Code ansehen, um zu sehen, wie er implementiert wird, wenn Sie das Video nicht kaufen möchten.
Adam S

Views infinite scroll für Drupal 8 benötigt keine externe Bibliothek, fordert nur den benötigten Inhalt an, unterstützt exponierte Filter und kann automatisch oder per Knopfdruck arbeiten.
Sam152

Antworten:


26

Dies ist eines der Probleme, die mehrere Menschen in der Drupal-Welt zu lösen versucht haben.

Ich habe kürzlich einen Vortrag zu genau diesem Thema gehalten und wie man es mit Drupal schafft. Leider habe ich nie eine meiner Folien irgendwo aufgehängt, wo der Rest der Welt sie sehen kann.

Hier ist die Aufteilung der Module:

Ansichten Unendliche Schriftrolle

  • Funktioniert nicht mit Views Ajax-Unterstützung - Es hackt herum, um eine eigene Ajax-Anfrage zu machen
  • Führt eine vollständige Seitenanforderung durch. Dies liegt daran, dass die Ajax-Anforderung für Ansichten nicht verwendet wird
  • Benötigt Views 3.x - Dies ist ein Plus, da der Pager in 3.x steckbar ist

Views Unendlicher Pager

  • Support Views 2.x - Das ist wirklich keine gute Sache, da der Pager nicht steckbar ist
  • Da es mit 2.x funktioniert, dreht es sich wirklich um das Pager-Thema, die regulären Ansichten und das Vorverarbeitungsverhalten. So bricht es einige Funktionen.

Und last but not least ist ein neues Projekt, in das ich gerade im Lichte dieser Frage aufgenommen habe. Der Grund für das Projekt ist, dass ich auch Ansichten brauche, die mehr Unterstützung bieten, mit Ausnahme der oben genannten Probleme, die für mein Projekt nicht akzeptabel sind.

Views laden mehr

  • Benötigt Views 3.x - Dies ist absichtlich.
  • Die Unterstützung zeigt reguläre Pageroptionen an, z. B. Offsets und Seitenzahl
  • Volle Unterstützung der Ajax-Funktion für Ansichten
    • Wenn Ajax in der Ansicht aktiviert ist, wird beim Laden von mehr Inhalt am Ende der Liste hinzugefügt
    • Wenn Ajax deaktiviert ist, wird die Seite aktualisiert und der alte Inhalt durch den neuen ersetzt
    • Beim Ajax-Rückruf wird keine vollständige Seitenanforderung ausgeführt, sondern es wird der natürliche Rückruf ausgeführt, und der angehängte Inhalt wird nicht ersetzt.
  • Wenn Sie das Wegpunktmodul verwenden, kann die Ansicht so konfiguriert werden, dass automatisch neue Inhalte abgerufen werden, wenn der Benutzer zum Ende der Seite blättert.
  • Unterstützt JQuery-Effekte (derzeit wird nur der Überblendungseffekt unterstützt, in Kürze).

Hoffe das beantwortet deine Frage. Das ist meine "unvoreingenommene" ;-) Meinung zu allen Ansichten mehr Modul laden.


Ging mit Views Infinite Pager, wie wir auf Ansichten 2. Wir werden versuchen, unser Projekt zu bewegen, um auf Ansichten 3.
Lucy

Ich habe einige Änderungen an der Antwort vorgenommen, um die neuen Funktionen von views_load_more zu berücksichtigen und alle Verweise auf das Sandbox-Projekt zu entfernen, da dies nun ein vollständig unterstütztes Projekt auf drupal.org ist
ericduran


2

Eine andere Methode, die https://github.com/paulirish/infinite-scroll in Drupal verwendet, besteht darin, jeden Drupal-Pager in einen Autopager umzuwandeln - Pager mit unendlichem Bildlauf - laden Sie mehr Pager .

Schritt 1

Laden Sie jquery.infinitescroll.min.js von https://github.com/paulirish/infinite-scroll herunter und fügen Sie es in /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js ein.

Schritt 2

Fügen Sie die JavaScript-Datei zur .info-Datei Ihres Themas hinzu.

Schritt 3

Erstellen Sie eine benutzerdefinierte JavaScript-Datei /sites/all/themes/YOURTHEME/js/YOURTHEME.js, die den folgenden Code enthält.

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

Schritt 4

Fügen Sie das CSS des unendlichen Scrollloaders hinzu

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

Schritt 5

Stellen Sie sicher, dass die jquery-Version neuer als 1.7.1 ist. Verwenden Sie eine der in http://drupal.org/node/1058168 beschriebenen Methoden, um eine neuere Version von jQuery in Drupal zu installieren.


1

Ich kann zu der ersten Antwort keinen Kommentar hinzufügen. Sie sollten jedoch das neue Modul hinzufügen: https://www.drupal.org/project/gd_infinite_scroll Mit diesem Modul können Sie Inhalte und Pager in eine unendliche Schriftrolle verwandeln oder mehr Pager laden.

Von der Seite des Moduls:

Stellen Sie eine Verwaltung bereit, um das jQuery-Plug-in für unendliche Bildläufe zu verwenden: Auto-Pager auf benutzerdefinierten Seiten, die Pager verwenden. Sie können das automatische Laden beim Scrollen oder eine Schaltfläche zum Laden weiterer Elemente verwenden.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.