Infinite Ajax Scroll: Hide parent container of load more button if last-CodePudding

I'm using Infinite Ajax Scroll for pagination on my blog. When there are no more posts left to load, I want to hide the trigger (the buttons) parent container (currently, it just has opacity: 0, but this leaves unwanted whitespace).

In the console, I can see that IAS leaves a message saying "No more pages left to load", so I know there is a method in place to check if more posts exist. But, having applied two methods, I cannot get it to work.

Method 1: Using last:function() Method 2: Checking if the trigger has opacity: 0, then hiding parent container if so

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@webcreate/[email protected]/dist/infinite-ajax-scroll.min.js"></script>


<div >
  <div >
    <div >
      <div >
        <a >Load more</a>
      </div>
    </div>
  </div>
</div>

<script>

$(function() {

  var ias = new InfiniteAjaxScroll('.insertPosts', {
    item:       '.insertCard',
    pagination: '.blog-pagination',
    next:       '.next-posts-link',
    trigger:    '.loadmore',
    loadOnScroll: false,
    last:function(){
      $(".pagination-hide").addClass("d-none");
    }
  });

  // $('.loadmore').click(function(){
  //   if ( $(this).css('opacity') == '0' ) {
  //     console.log("true");
  //     $(this).parent(".pagination-hide").addClass("d-none");
  //   }
  // });


});

</script>

Have also tried the following, as per IAS docs, however, this just adds the d-none class to pagination-hide on page load, rather than adding the class (as it should) if there are no more posts to load.

trigger: {
  element: '.loadmore',
  
  // this function is called when the button has to be hidden
  hide: function(element) {
    $(element).closest(".pagination-hide").addClass("d-none");
    element.style.opacity = '0'; // default behaviour
  }
  
},

CodePudding user response：

Seems like you would also need to add a show() method that un-does the changes in hide(), in order to get the correct behavior:

trigger: {
  element: '.loadmore',
  
  // this function is called when the button has to be hidden
  hide: function(element) {
    $(element).closest(".pagination-hide").addClass("d-none");
    element.style.opacity = '0'; // default behaviour
  },
  
  show: function(element) {
    $(element).closest(".pagination-hide").removeClass("d-none");
    element.style.opacity = '1';
  }
  
},

CodePudding user response：

Sorry, but you went on a bad road. You shoud show button <a >Load more</a> if you have some other conten unstead of hiding unnecessary. It's wrong in root. You are calling unnecessary operations in the DOM render. You better rewrite your code.

CodePudding user response：

AFAICT you were on the right track with your first attempt - the last event seems like exaclty the right way to do what you need. But the docs also show that you need to bind event handlers with .on(), not pass them as options, which is what you tried.

For example, something like this:

var ias = new InfiniteAjaxScroll('.insertPosts', {
    // ... your options
    // last:function(){} // <-- won't work, not the way to bind event handlers
});

// What we want to happen when we've hit the last page
function noMorePages() {
    $(".pagination-hide").addClass("d-none");
}

// Handle the "last" event with our function
ias.on('last', noMorePages);

There is a similar example in the docs.

CodePudding user response：

You simply need to provide show and hide functions for the trigger ref. The library calls the functions automatically on last event.
Demo website https://zyf5k.csb.app/
Codesandbox https://codesandbox.io/s/zen-volhard-zyf5k?file=/index.js
Code for ready reference:

window.ias = new InfiniteAjaxScroll(".container", {
  item: ".item",
  next: nextHandler,
  trigger: {
    element: ".loadmore",
    show: function (element) {
      element.parentElement.style.display = "block";
    },

    hide: function (element) {
      //hide desired element`
      element.parentElement.style.display = "none";
    }
  }
});

Note: Didn't realize @Kevin had already answered this. Posting the answer for extra info.