Załaduj więcej treści za pomocą ajax, klikając więcej linków w widoku

Mam niestandardowy widok bloku. Wyświetlam 5 ostatnich tytułów węzłów. Jeśli ktoś kliknie więcej linku, chcę załadować kolejne 5 tytułów pod bieżącymi 5 tytułami węzłów. Brak odświeżania strony i brak pagera. czy to możliwe? Jak miałbym to zrobić?

Jest to jeden z tych problemów, które wiele osób w świecie drupali próbowało rozwiązać.

Niedawno przedstawiłem prezentację na temat dokładnie tego samego problemu i tego, jak to osiągnąć za pomocą drupala. Niestety, nigdy nie opublikowałem żadnej z moich slajdów, gdziekolwiek reszta świata może to zobaczyć.

Oto podział modułów:

Wyświetl nieskończony zwój

• Nie działa z obsługą Views Ajax - włamuje się wokół niego, aby utworzyć własne żądanie ajax
• Wykonuje pełne żądanie strony - Dzieje się tak, ponieważ nie korzysta ono z żądania Ajax wyświetleń
• Wymaga wyświetleń 3.x - To plus, ponieważ pager można podłączyć do wersji 3.x

Wyświetla nieskończony pager

• Widoki obsługi 2.x - To naprawdę nie jest dobra rzecz, ponieważ pager nie jest kompatybilny z wtyczką
• Ponieważ działa z wersją 2.x, naprawdę włamuje się do motywu pagera, regularnych widoków ajax i zachowania wstępnego przetwarzania. To psuje niektóre funkcje.

I na koniec nowy projekt, do którego właśnie dodałem w świetle tego pytania. Powodem projektu jest moja potrzeba również widoków, które wspierają ładowanie więcej, z wyjątkiem problemów wymienionych powyżej, które są nie do zaakceptowania dla mojego projektu.

Widoki ładują więcej

• Wymaga wyświetleń 3.x - jest to celowe.
• Obsługa wyświetla zwykłe opcje pagera, takie jak przesunięcia, liczba stron
• W pełni obsługuje funkcję ajax
  • Jeśli Ajax jest włączony w widoku, ładowanie więcej doda zawartość na dole listy
  • Jeśli ajax jest wyłączony, strona się odświeży i zastąpi starą treść nową
  • Nie wykonuje pełnego żądania strony podczas wywołania zwrotnego ajax, pozwala widokom robić naturalne wywołanie zwrotne i zamiast zastępować treść, którą do niego dołącza.
• Jeśli korzystasz z modułu waypointa , widok można skonfigurować w taki sposób, aby automatycznie pobierał nową zawartość, gdy użytkownik przewija do dołu strony.
• Obsługuje efekty JQuery (w tej chwili obsługiwany jest tylko efekt zanikania, więcej wkrótce).

Mam nadzieję, że to odpowiada na twoje pytanie. To jest moja „obiektywna” ;-) opinia na temat wszystkich widoków ładujących więcej modułów.

Inną metodą wykorzystującą https://github.com/paulirish/infinite-scroll w Drupal jest Przekształcenie dowolnego pagera Drupal w autopager - nieskończony pager przewijania - załaduj więcej pager .

Krok 1

Pobierz plik jquery.infinitescroll.min.js ze strony https://github.com/paulirish/infinite-scroll i umieść go w /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Krok 2

Dodaj plik JavaScript do pliku .info swojego motywu.

Krok 3

Utwórz niestandardowy plik JavaScript /sites/all/themes/YOURTHEME/js/YOURTHEME.js zawierający następujący kod.

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

Krok 4

Dodaj CSS nieskończonego programu ładującego przewijanie

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

Krok 5

Upewnij się, że wersja jquery jest nowsza niż 1.7.1. Użyj jednej z metod opisanych w http://drupal.org/node/1058168 do zainstalowania nowszej wersji jQuery w Drupal.

Nie mogę dodać komentarza do pierwszej odpowiedzi. Ale powinieneś dodać nowy moduł: https://www.drupal.org/project/gd_infinite_scroll Moduł ten pozwala przekształcić dowolną zawartość i pager w nieskończone przewijanie lub załadować więcej pagerów.

Ze strony modułu:

Podaj administrację, aby korzystać z nieskończonej wtyczki przewijania jQuery: auto-pager na niestandardowych stronach za pomocą pager. Możesz użyć funkcji automatycznego ładowania przy przewijaniu lub przycisku ładowania więcej.