jQuery Infinite With Template Plugin

JQuery plugin for ajax-enabled infinite page scroll with template.

If you like jQuery until now, this little library will help.

Install

on npm

npm i @cable8mm/jquery-infinite-with-template

on html

<script src="https://cdn.jsdelivr.net/npm/@cable8mm/[email protected]/jquery.infiniteScrollWithTemplate.min.js" integrity="sha256-bX3iyCp0T50YmDRgpUl1tY/LGlpPGsKR4TqUkpcq6WA=" crossorigin="anonymous"></script>

on ESM

<script type="module"> import @cable8mm/jquery-infinite-with-template from https://cdn.jsdelivr.net/npm/@cable8mm/[email protected]/+esm </script>

Demo

For convinient http-server need:

git clone https://github.com/cable8mm/jquery-infinite-with-template

cd jquery-infinite-with-template

http-server .

and visit http://127.0.0.1:8080/examples/

If you are not installed http-server, refer to https://www.npmjs.com/package/http-server

You can regenerate data_sources:

# permission required
./examples/generate > data_sources.ajax

Usage sample

Javascript part:

$("#result").infiniteTemplate({
	templateSelector: "#test-tmpl",
	dataPath: "data_sources.ajax",
	query: "word=ajax",
	templateHelpers: {
		authId : 354
	},
    zeroCallback: function () {
        alert("zero alert");
    },
});

HTML part:

<div id="result"></div>

<script id="test-tmpl" type="text/x-jsrender">
	<p>{{:id}}. {{:title}} [user:{{:authId}}]</p>
</script>

AJAX part: data_sources.ajax. This should return Ajax:

{
	"data": [
	{
		"id": 885,
		"title": "iGFIJUSPp8oXoBDqoRXKK0VEAU0IBG(word=ajax)"
	},
	{
		"id": 277,
		"title": "HM3iPLDwd3nQKNH5eOkaOh5QlSb92F(word=ajax)"
	},
	{
		"id": 583,
		"title": "O2X0VQeWFGIRQPcVquYwHx49VNhwX3(word=ajax)"
	},
...even more rows
}

Result:

<div id="result">
	<p>885. iGFIJUSPp8oXoBDqoRXKK0VEAU0IBG(word=ajax) [user:354]</p>
	<p>277. HM3iPLDwd3nQKNH5eOkaOh5QlSb92F(word=ajax) [user:354]</p>
	<p>583. O2X0VQeWFGIRQPcVquYwHx49VNhwX3(word=ajax) [user:354]</p>
	<p>179. vrEwi7hgVucCEDmuO7pOf4Gzk4gmyh(word=ajax) [user:354]</p>
	<p>380. yviF2uDLyySLZaAPs3bKNbSZfHeQA7(word=ajax) [user:354]</p>
	<p>329. 865t05x9DMngrETccBuqrY7ts9Xt3R(word=ajax) [user:354]</p>
	<p>84. D6mhKuRA06ONCE5HbswSwPjZvp0bUh(word=ajax) [user:354]</p>
	<p>528. saWL46OBtTDGIBuZL9TkmfBvPXiRqM(word=ajax) [user:354]</p>
	<p>522. PBe0jjP1Egy6NWpHzuA86JHupxNGvc(word=ajax) [user:354]</p>
	<p>115. vBmfL7osq2VAKIktVznrC6QZzYpc1H(word=ajax) [user:354]</p>
	<p>722. mti7aMut4TxAygKAdfGylml9QgJoDN(word=ajax) [user:354]</p>
	<p>401. 06kgapSQylxWJOvFmDNLIcvpSPMB7V(word=ajax) [user:354]</p>
	<p>245. UD0TP3bMU7J4mAlGqwo52F1I0rJIyR(word=ajax) [user:354]</p>
	<p>985. 3xSyr0m68K3Ec6y8vJgIhYgSfgcGnG(word=ajax) [user:354]</p>
	<p>78. DWpWRzx1x4Ibfh1Gn0Lk0F3aufu34d(word=ajax) [user:354]</p>
	<p>573. iINBTozeMIeZguTU6lLB9j76zNZ4AK(word=ajax) [user:354]</p>
	<p>946. OEuUblddtI9vqlyL89nDXizhvryn4e(word=ajax) [user:354]</p>
	<p>756. wsBL8dxDf6UjTiNWNnnX4XAlAonHBM(word=ajax) [user:354]</p>
	<p>66. q3irGi5lNUXccTDTDfl2jRlzVp04uk(word=ajax) [user:354]</p>
	<p>20. vcq8sKN4RhCEoFLVW2vbX2eR14EKp8(word=ajax) [user:354]</p>
</div>

Options

templateSelector - (required) jsRender template identify

dataPath - (required) URL to load more data via AJAX

templateHelpers - (optional) Merge with json to load

key - (optional) data(default)

query - (optional) Additional query

method - (optional) GET(default), POST, PUT, DELETE

loadAtStart - (optional) true(default), false

loadSelector - (optional) if it set, it load more data every time the selector clicked

initialPage - (optional) 1(default)

preventCache - (optional) false(default) if true, Add timestamp

zeroCallback - (optional) null(default) if function, call zeroCallback when result is nothing

Examples

// https://m.holapet.com/adoption

<x-adoption.rounded-card-list :selector="'adoption-rounded-card-list'">
    @foreach($adoptions as $item)
    <x-adoption.rounded-card :item="$item" />
    @endforeach
</x-adoption.rounded-card-list>
<x-adoption.rounded-card-tmpl />
<script>
    $("#adoption-rounded-card-list").infiniteTemplate({
        templateSelector: "#adoption-rounded-card-tmpl",
        dataPath: "/api/adoption",
        initialPage: 3,
    });
</script>

// https://m.holapet.com/place/pensions/region/1

<x-place.rounded-card-list :selector="'place-rounded-card-list'">
    @foreach($region->placesRecent as $item)
    <x-place.rounded-card :item="$item" />
    @endforeach
</x-place.rounded-card-list>
<x-place.rounded-card-tmpl />
<script>
    $("#place-rounded-card-list").infiniteTemplate({
        templateSelector: "#place-rounded-card-tmpl",
        dataPath: "/api/place/pensions/region/{{ $region->id }}",
        initialPage: 3,
        templateHelpers: {
            minColumnCount: 1
        }
    });
</script>

// https://m.holapet.com/search/show?word=%ED%8F%AC%EB%A9%94%EB%9D%BC%EB%8B%88%EC%95%88

@include('shared.jtemplate.search-user')

@auth
<script>
    $("#user-list").infiniteTemplate({
        templateSelector: "#user-tmpl",
        dataPath: "/api/user",
        query: "word={{ $word }}",
        templateHelpers: {
            authId : {{ Auth::id() ?? 0 }},
            followeeIds: {!! Auth::user()->followee_ids->toJson() ?? 'false' !!}
        }
    });
</script>
@endauth
@guest
<script>
    $("#user-list").infiniteTemplate({
        templateSelector: "#user-tmpl",
        dataPath: "/api/user",
        query: "word={{ $word }}",
    });
</script>
@endguest

// https://m.holapet.com/story/hot

@if(!empty($hotStories))
<x-story.grid-card-list :selector="'story-grid-card-list'">
    @foreach($hotStories as $item)
    <x-story.grid-card :item="$item" />
    @endforeach
</x-story.grid-card-list>
@endif
<x-story.grid-card-tmpl />
<script>
    $("#story-grid-card-list").infiniteTemplate({
        templateSelector: "#story-grid-card-tmpl",
        dataPath: "/api/story/hot",
        initialPage: 3,
    });
</script>

The jQuery Infinite With Template Plugin project is open-sourced software licensed under the MIT license.