<p>This is just a math/logic error caused by:</p>

<pre><code>// Increment count by 3 entries
count = (count) + 3;

if (count &gt;= totalCount) {
    $("#loadMore").fadeOut();
    console.log('count is larger than total count');
}
</code></pre>

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

<p>100% untested, but something like this should work:</p>

<pre><code>$(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 &gt; 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;
          }

        });
      }

    });
});
</code></pre>

CC BY-SA 3.0
2018-02-21T00:25:39.603Z
2018-02-21T00:25:39.603Z
Brad Bell
<p>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.</p>

<p>I used <a href="https://craftcms.stackexchange.com/a/9868/193">this post</a> as a guide to my code.</p>

<p>My js code is here:</p>

<pre><code>  {# 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 &lt; 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 &gt;= totalCount){
                    $("#loadMore").fadeOut();
                    console.log('count is larger than total count');
                }

            });
          }// endif

      });
  });
</code></pre>

<p>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) <a href="https://www.dropbox.com/s/79datzwa2qktpi0/ajax.gif?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/79datzwa2qktpi0/ajax.gif?dl=0</a></p>

<p>** link to pastebin with full template** <a href="https://pastebin.com/cNUJW4xr" rel="nofollow noreferrer">https://pastebin.com/cNUJW4xr</a>
removed google tags from this template but otherwise intact</p>

CC BY-SA 3.0
2018-02-16T14:02:37.413Z
Is there a certain reason why you use twig to fetch the entries you want to reload with ajax instead of using a custom controller or the element api? We need to see how you fetch the entries in order to help you
Robin Schambach
CC BY-SA 3.0
2018-02-16T14:17:38.533Z
@RobinSchambach because I don't know what a custom controller is or the element api. Additionally I have number of entries being excluded as they are in different featured blocks above. The full template is 500 lines long, which I thought was too long to include here.
CreateSean
CC BY-SA 3.0
2018-02-16T14:22:31.093Z
@RobinSchambach have added link to pastebin with full template.
CreateSean
CC BY-SA 3.0
2018-02-16T14:22:40.830Z
You usually want to do these kind of things with a plugin in a controller and not in twig. Twig is only supposed to be a template engine and should not contain too much logic. It is possible what you want to achieve but it's a really ugly way and most people suggest not to do it for certain reasons. As you can see in your template you have all these `isAjaxRequest` blocks which is not good
Robin Schambach
CC BY-SA 3.0
2018-02-16T14:29:14.713Z
I try to avoid plugins and I didn't see any other documented approach to do this. Is there a solution to my question?
CreateSean
CC BY-SA 3.0
2018-02-16T14:34:54.113Z
You won't see other documented approaches because it's not intended to go this way. It's not that hard to create a few lines of PHP Code and usually a faster method because you don't have to be so patient in your template. However I'm not here to convince you to use the proper methods so I'll stop that topic now
Robin Schambach
<ajax><pagination><javascript>
Ajax pagination not loading last entries if not equal to pagination number
# Ajax pagination not loading last entries if not equal to pagination number

(Asked by: username_0 on 2018-02-16)

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

**Tags:** ajax, pagination, javascript
> **Comments:**
> **username_1**: Is there a certain reason why you use twig to fetch the entries you want to reload with ajax instead of using a custom controller or the element api? We need to see how you fetch the entries in order to help you  
> **username_0**: @RobinSchambach because I don't know what a custom controller is or the element api. Additionally I have number of entries being excluded as they are in different featured blocks above. The full template is 500 lines long, which I thought was too long to include here.  
> **username_0**: @RobinSchambach have added link to pastebin with full template.  
> **username_1**: You usually want to do these kind of things with a plugin in a controller and not in twig. Twig is only supposed to be a template engine and should not contain too much logic. It is possible what you want to achieve but it's a really ugly way and most people suggest not to do it for certain reasons. As you can see in your template you have all these `isAjaxRequest` blocks which is not good  
> **username_0**: I try to avoid plugins and I didn't see any other documented approach to do this. Is there a solution to my question?  
> **username_1**: You won't see other documented approaches because it's not intended to go this way. It's not that hard to create a few lines of PHP Code and usually a faster method because you don't have to be so patient in your template. However I'm not here to convince you to use the proper methods so I'll stop that topic now  

---

## 1 answers

### Answer by username_2 on 2018-02-21. Score: 1 | Accepted answer

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;
          }

        });
      }

    });
});


---

