Prinsipnya sederhana. Di sini Saya memakai navigasi Posting Lebih Lama sebagai navigasi AJAX dan memakai jQuery $.get() untuk memanggil URL pada navigasi tersebut:
// Menyingkirkan navigasi posting lebih gres (Navigasi ini tidak diperlukan) $('#blog-pager').find('#blog-pager-newer-link').remove(); // Dasar AJAX navigasi $('#blog-pager').on("click", "#blog-pager-older-link a", function() { $.get(this.href, {}, function(data) { // Proses... }, "html"); return false; });Kita akan memakai elemen .blog-posts untuk memuat posting-posting gres dari halaman selanjutnya.
Menerapkan AJAX pada Navigasi Halaman
Pastikan jQuery sudah terpasang pada template. Masuk ke editor HTML template, lalu salin isyarat ini dan letakkan di atas </body>:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script> //<![CDATA[ (function($) { var $pager = $('#blog-pager'), $posts = $('.blog-posts'); $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih gres $pager.on("click", "#blog-pager-older-link a", function() { $.get(this.href, {}, function(data) { var source = $(data).find('.post').length ? $(data) : $('<div></div>'); $posts.append(source.find('.blog-posts').html()); // Menyisipkan posting $pager.html(source.find('#blog-pager-older-link').clone()); // Memperbaharui navigasi }, "html"); $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat ketika sedang memuat return false; }); })(jQuery); //]]> </script> </b:if> </b:if>Klik Simpan Template.
Sekarang coba buka halaman blog Anda lalu klik navigasi Posting Lama atau Older Post. Jika navigasi tersebut menjelma teks bertuliskan “memuat...” menyerupai ini, maka itu artinya AJAX sedang bekerja:
Tunggu hingga posting-posting gres muncul di bawah posting-posting yang sedang terlihat ketika ini.
Infinite Scroll (?)
Untuk membuat infinite scroll pada sistem navigasi halaman, cukup nyatakan event .scroll() pada $(window) dan cek apakah jarak gulungan layar telah mencapai batas selesai atau belum. Jika ya, picu event .click() pada navigasi AJAX yang telah kita buat sebelumnya.
Dalam perkara ini, Saya memilih batas selesai gulungan layar bukan menurut tinggi halaman, melainkan menurut posisi navigasi terhadap bab teratas dari layar:
(function($) { var $pager = $('#blog-pager'), $posts = $('.blog-posts'), loading = false; // AJAX $pager.find('#blog-pager-newer-link').remove(); // Menyingkirkan navigasi posting lebih gres $pager.on("click", "#blog-pager-older-link a", function() { $.get(this.href, {}, function(data) { var source = $(data).find('.post').length ? $(data) : $('<div></div>'); $posts.append(source.find('.blog-posts').html()); $pager.html(source.find('#blog-pager-older-link').clone()); loading = false; }, "html"); $(this).replaceWith('<span>Memuat...</span>'); // Ubah navigasi posting menjadi indikator memuat ketika sedang memuat return false; }); // INFINITE SCROLL $(window).on("scroll resize", function() { // Jika AJAX sedang tidak memuat dan bila jarak gulungan layar + tinggi layar telah mencapai // tinggi yang sama dengan/lebih besar dari offset navigasi halaman terhadap bab teratas dari layar... if (!loading && ($(this).scrollTop() + $(this).height()) >= $pager.offset().top) { $pager.find('#blog-pager-older-link a').trigger("click"); // Picu event `.click()` pada navigasi AJAX posting loading = true; // Mulai antre pemuatan } }); })(jQuery);Catatan: JavaScript Auto Read-More akan tereksekusi ketika halaman dimuat dengan cara biasa, sehingga jangan kaget bila posting-posting gres yang dimuat oleh AJAX tidak akan terpotong menjadi ringkasan posting. Saya sarankan Anda untuk memakai konsep ringkasan posting tanpa JavaScript yang pernah Saya tuliskan sebelumnya di sini.