jQuery Infinite With Template Plugin for Ajax-enabled endless page scroll using a template. InfiniteScrollWithTemplate.js is a lightweight and easy-to-use jQuery plugin to implement AJAX-enabled endless scrolling in your web application.
The plugin fetches data using AJAX requests and loads more content into your document when you scroll the page or click on a custom trigger element such as the Upload More button.
ajax load more repeater templates, infinite scrolling javascript, wordpress ajax load more custom query, ajax infinite scroll
How to make use of it:
1. Load the wanted jQuery and jsrender JavaScript libraries within the doc.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jsrender.min.js"></script>
2. Load the Load InfiniteScrollWithTemplate plugin.
<script src="jquery.infiniteScrollWithTemplate.js"></script>
3. Create a customized template for data rendering.
<script id="my-tmpl" type="text/x-jsrender"> <p>{{:id}}. {{:title}}</p> </script>
4. Create a container to which the brand new content is appended on the web page scroll.
<div id="result"></div>
5. Initialize the plugin and decide the info supply.
$("#result").infiniteTemplate({ templateSelector: "#my-tmpl", dataPath: "data_sources.ajax", query: "word=ajax", });
6. The information should return the AJAX response as follows.
{ "data": [ { "id": 1, "title": "Title 1" }, { "id": 2, "title": "Title 2" }, { "id": 3, "title": "Title 3" }, // more data here ] }
7. Enable a Load More button to load extra content instead of Page Scroll.
$("#result").infiniteTemplate({ templateSelector: "#my-tmpl", dataPath: "data_sources.ajax", query: "word=ajax", loadSelector: $('#loadmore'), });
8. More plugin choices with default values.
$("#result").infiniteTemplate({ // POST, PUT, DELETE method: "GET", // Merge with json to load templateHelpers: null, // load on page load loadAtStart: true, // Load more data when the selector gets clicked loadSelector: null, // initial page initialPage: 1, // prevent cache preventCache: false, });
9. Execute a callback function when there isn’t any consequence.
$("#result").infiniteTemplate({ templateSelector: "#my-tmpl", dataPath: "data_sources.ajax", query: "word=ajax", zeroCallback: function () { alert("zero alert"); }, });
AJAX-enabled Infinite Scroll With Template, jQuery Infinite With Template Plugin/Github, ajax load more on scroll
See Demo And Download
Official Website(cable8mm): Click Here
This superior jQuery/javascript plugin is developed by cable8mm. For extra Advanced Usages, please go to the official website.