Muat lebih banyak konten dengan ajax saat mengklik lebih banyak tautan dalam tampilan

Saya memiliki tampilan blok khusus. Saya menampilkan 5 judul simpul terakhir. Jika seseorang mengklik lebih banyak tautan, saya ingin memuat 5 judul berikutnya di bawah judul 5 simpul saat ini. Tidak ada penyegaran halaman dan bukan penyeranta. Apakah ini mungkin? Bagaimana saya bisa melakukan ini?

Jadi ini adalah salah satu masalah yang coba dipecahkan oleh banyak orang di dunia drupal.

Baru-baru ini saya memberikan presentasi tentang masalah yang sama persis ini dan bagaimana menyelesaikannya dengan drupal. Sayangnya saya tidak pernah memposting slide saya di mana pun di mana seluruh dunia bisa melihatnya.

Berikut adalah rincian modul:

Tampilan Gulir Tak Terbatas

• Tidak bekerja dengan dukungan Views Ajax - Ini hack di sekitarnya untuk membuat permintaan ajax sendiri
• Membuat permintaan halaman penuh - Ini karena tidak menggunakan permintaan Views Ajax
• Membutuhkan Tampilan 3.x - Ini adalah nilai tambah, karena pager dapat dipasang dalam 3.x

Tampilan Infinite Pager

• Dukungan Tampilan 2.x - Ini benar-benar bukan hal yang baik, karena pager tidak dapat dipasang
• Karena ini berfungsi dengan 2.x, ia benar-benar meretas tema pager, ajax tampilan reguler, dan perilaku preprocessing. Jadi itu merusak beberapa fungsi.

Dan yang terakhir adalah proyek baru di mana saya baru saja menambahkan dalam terang pertanyaan ini. Alasan untuk proyek ini adalah kebutuhan saya untuk juga membutuhkan pandangan yang mendukung memuat lebih banyak kecuali masalah yang disebutkan di atas kami tidak dapat diterima untuk proyek saya.

Tampilan memuat Lebih Banyak

• Membutuhkan Tampilan 3.x - Ini disengaja.
• Mendukung tampilan opsi pager biasa, seperti offset, jumlah halaman
• Sepenuhnya mendukung fitur tampilan ajax
  • Jika Ajax diaktifkan pada tampilan, memuat lebih banyak akan menambahkan konten ke bagian bawah daftar
  • Jika ajax dinonaktifkan, halaman akan menyegarkan dan mengganti konten lama dengan konten baru
  • Itu tidak melakukan permintaan halaman penuh ketika melakukan panggilan balik ajax, itu memungkinkan pandangan lakukan adalah panggilan balik alami dan bukannya mengganti konten yang ditambahkannya.
• Jika Anda menggunakan modul waypoint , tampilan dapat dikonfigurasikan untuk secara otomatis mendapatkan konten baru ketika pengguna menggulir ke bagian bawah halaman.
• Mendukung efek JQuery (saat ini hanya efek fade yang didukung, lebih cepat datang).

Semoga ini menjawab pertanyaan Anda. Ini adalah pendapat saya "tidak bias" ;-) pada semua tampilan memuat lebih banyak modul.

Metode lain menggunakan https://github.com/paulirish/infinite-scroll di Drupal adalah Ubah pager Drupal apa pun menjadi autopager - pager gulir tak terbatas - muat pager lebih banyak .

Langkah 1

Unduh jquery.infinitescroll.min.js dari https://github.com/paulirish/infinite-scroll dan letakkan di /sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js.

Langkah 2

Tambahkan file JavaScript ke file .info dari tema Anda.

Langkah 3

Buat file JavaScript khusus / sites/all/themes/YOURTHEME/js/YOURTHEME.js yang berisi kode berikut.

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

Langkah 4

Tambahkan CSS dari pemuat gulir yang tak terbatas

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

Langkah 5

Pastikan versi jquery lebih baru dari 1.7.1. Gunakan salah satu metode yang dijelaskan dalam http://drupal.org/node/1058168 untuk menginstal versi jQuery yang lebih baru di Drupal.

Saya tidak dapat menambahkan komentar pada jawaban pertama. Tetapi Anda harus menambahkan modul baru: https://www.drupal.org/project/gd_infinite_scroll Modul ini memungkinkan Anda mengubah konten dan pager menjadi gulir yang tak terbatas atau memuat lebih banyak pager.

Dari halaman modul:

Berikan administrasi untuk menggunakan plugin jQuery scroll tak terbatas: auto-pager pada halaman kustom menggunakan pager. Anda dapat menggunakan pengisian otomatis pada gulir atau memuat lebih banyak tombol.