https://addyp.com/assets/js/load-more.js

1/*--------------------------------------------------
2Load More (keyset/cursor pagination)
3
4Reads cursor values off the last rendered .list-item card and
5re-fetches the SAME page URL + query string with ajax_more=1 and
6cursor_* params appended, so every existing GET-driven filter
7(cat_id, location, show, sort, dist, etc.) resolves identically
8to the full page load. Appends the returned card HTML to the
9results container and stops when the server reports no more rows.
10--------------------------------------------------*/
11(function ($) {
12	'use strict';
13
14	$(document).ready(function () {
15		var $wrap = $('#load-more-wrap');
16		var $btn = $('#load-more-btn');
17
18		if (!$wrap.length || !$btn.length) {
19			return;
20		}
21
22		var baseUrl = $wrap.data('base-url');
23		var isLoading = false;
24		var reachedEnd = false;
25
26		function readCursor() {
27			var $last = $('.list-item').last();
28
29			if (!$last.length) {
30				return null;
31			}
32
33			return {
34				cursor_feat: $last.data('cursor-feat'),
35				cursor_paid: $last.data('cursor-paid'),
36				cursor_priority: $last.data('cursor-priority'),
37				cursor_place_id: $last.data('cursor-place-id'),
38				cursor_rating: $last.data('cursor-rating'),
39				cursor_clicks: $last.data('cursor-clicks'),
40				cursor_name: $last.data('cursor-name')
41			};
42		}
43
44		function loadMore() {
45			if (isLoading || reachedEnd) {
46				return;
47			}
48
49			var cursor = readCursor();
50
51			if (!cursor) {
52				return;
53			}
54
55			isLoading = true;
56			$btn.prop('disabled', true).text('Loading…');
57
58			var separator = baseUrl.indexOf('?') === -1 ? '?' : '&';
59			var url = baseUrl + separator + 'ajax_more=1&' + $.param(cursor);
60
61			$.ajax({
62				url: url,
63				method: 'GET',
64				success: function (html) {
65					var $response = $('<div>').html(html);
66					var $meta = $response.find('.ajax-more-meta');
67					var hasMore = $meta.length ? $meta.data('has-more') == 1 : false;
68					$meta.remove();
69
70					var $cards = $response.children();
71
72					if ($cards.length) {
73						$('#listing-cards').append($cards);
74
75						// re-run the same star-rating init the page runs once on

76						// load (templates/tpl-js/js-listings.php) - it only ever
77						// saw the original cards, so newly appended ones need it too
78						if (typeof $.fn.raty === 'function') {
79							$cards.find('.item-rating').raty({
80								readOnly: true,
81								score: function () {
82									return this.getAttribute('data-rating');
83								},
84								starType: 'i'
85							});
86						}
87					}
88
89					if (!hasMore) {
90						reachedEnd = true;
91						$btn.hide();
92					} else {
93						$btn.prop('disabled', false).text('Load More');
94					}
95				},
96				error: function () {
97					// leave the button enabled so the user can retry
98					$btn.prop('disabled', false).text('Load More');
99				},
100				complete: function () {
101					isLoading = false;
102				}
103			});
104		}
105
106		$btn.on('click', loadMore);
107	});
108})(jQuery);