How to use the nextHandler functionality as shown in the Infinite Ajax Scroll JSON example

Question

I’m hoping to be able to use Infinite Ajax Scroll for a project I’m working on.

I’ve been looking at the Infinite Scroll JSON example here (https://infiniteajaxscroll.com/examples/json/) and I’m finding it difficult to understand how it works. I was wondering if there is any further documentation or code examples on how to use a JS or jQuery handler as shown in the example.

Ultimately what I want to do is load my container "items" using my own ajax function and then have Infinite Ajax Scroll display them. I want to do this because my container "items" are not located at URLs, but are saved as Wordpress transients.

Any help I could get with this would be very much appreciated.

Thanks, David.

Answer 1

Thank you for your question. The docs on using the nextHandler could indeed use improvement. Regardless, I'll try to explain how it works.

Normally IAS uses a selector to find the url of the next page. Then it loads the page and extracts the elements and appends them to the DOM. If you use the nextHandler, you will completely bypass this behavior. That means you will have to fetch data (in this case JSON) yourself and also insert new elements in the DOM.

Here is an example with comments to explain what it does.

First, let's assume our movie(1..n).json has the following format:

[
  {
    Title: 'item1',
    Plot: 'description1'
  }, {
    Title: 'item2',
    Plot: 'description2'
  }
]

Now the implementation of the nextHandler:

import InfiniteAjaxScroll from "@webcreate/infinite-ajax-scroll";

function nextHandler(pageIndex) {
  // we use the fetch api to load the next page. Any http client library will do, like axios.
  return fetch("./static/movies"+pageIndex+".json")
    // use the response as json
    .then((response) => response.json())
    // process the actual json data
    .then((jsonData) => {
      // create an array to store our html elements in memory
      let elements = [];

      // we loop over the items in our json and create an html element for each item
      jsonData.forEach(function (item) {
        const template = `<div class="item">
          <h1>${item.Title}</h1>
          <p>${item.Plot}</p>
        </div>`;

        const element = document.createElement("div");
        element.innerHTML = template.trim();

        elements.push(element.firstChild);
      });

      // now use IAS's append method to insert the elements
      // it's import that we return the append result, as it's an promise
      return this.append(elements);
    })
    // page 3 returns a 404, returning false here indicates there are no more pages to load
    .catch(() => false);
}

window.ias = new InfiniteAjaxScroll(".container", {
  item: ".item",
  next: nextHandler,
  pagination: false
});

I also prepared an interactive demo on Codesandbox:
https://codesandbox.io/s/serene-einstein-f73em