Ajax pagination not loading last entries if not equal to pagination number

Question

I've got ajax working on a page but if the number of articles is not exactly 3 (this is the pagination limit) then the remaining 1 or 2 entries do not get loaded. I'm not sure why or how to resolve this.

I used this post as a guide to my code.

My js code is here:

  {# set current url so we can page with the correct entries #}
  {% set current_url = "improve-your-club/topic/" ~ craft.request.getSegment(3) %}

  $(function () {

      // load the first page of entries
      var page = 1;

      // set this equal to pagination number
      var count = 3;

      // Get the total count that we set above
      var totalCount = $("#totalRelatedCount").val();

      $('#loadMore').click (function (e) {
          e.preventDefault();

          if(count < totalCount){
            $('#loading').fadeIn();

            $.get( "/{{ current_url }}/p"+page , function( data ) {

              $( ".remaining .feat-box-container" ).append( data );

              // this won't hide why not?
              $('#loading').fadeOut();

              // increase page
              page++;

              // Increment count by 3 entries
              count = (count) + 3;

              // Check if count is greater than or equal to the total count. If so hide the load more button. 
                if(count >= totalCount){
                    $("#loadMore").fadeOut();
                    console.log('count is larger than total count');
                }

            });
          }// endif

      });
  });

I've recorded a gif showing that the page only loads the first 6 entries despite there being 8 entries available to load - dropbox link to gif (too large to upload here) https://www.dropbox.com/s/79datzwa2qktpi0/ajax.gif?dl=0

** link to pastebin with full template** https://pastebin.com/cNUJW4xr removed google tags from this template but otherwise intact

Answer 1

This is just a math/logic error caused by:

// Increment count by 3 entries
count = (count) + 3;

if (count >= totalCount) {
    $("#loadMore").fadeOut();
    console.log('count is larger than total count');
}

Let's say you have a totalCount of 4. If count was initially 3, then it will now be 6 and greater than totalCount and you bail, never loading the remainder of the results.

100% untested, but something like this should work:

$(function () {

  // load the first page of entries
  var page = 1;

  // set this equal to pagination number
  var count = 3;

  // Get the total count that we set above
  var totalCount = $("#totalRelatedCount").val();

  var diff = totalCount;

  $('#loadMore').click (function (e) {
      e.preventDefault();

      console.log('count is ' + count);
      console.log('total count is ' + totalCount);

      if (diff > 0) {
        $('#loading').fadeIn();

        $.get( "/{{ current_url }}/p"+page , function( data ) {

          $( ".remaining .feat-box-container" ).append( data );

          // this won't hide why not?
          $('#loading').fadeOut();

          // increase page
          page++;

          diff = totalCount % count;

          if (diff === 0) {
              $("#loadMore").fadeOut();
              console.log('count is larger than total count');
          } else {
              // Increment count by 3 entries
              count = count + diff;
          }

        });
      }

    });
});