Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-21T00:25:39.603Z
Answers.LastActivityDate: 2018-02-21T00:25:39.603Z
Answers.UserDisplayName: Brad Bell
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:02:37.413Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:17:38.533Z
Comments.Text: @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.
Comments.UserDisplayName: CreateSean
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:22:31.093Z
Comments.Text: @RobinSchambach have added link to pastebin with full template.
Comments.UserDisplayName: CreateSean
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:22:40.830Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:29:14.713Z
Comments.Text: I try to avoid plugins and I didn't see any other documented approach to do this. Is there a solution to my question?
Comments.UserDisplayName: CreateSean
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2018-02-16T14:34:54.113Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Tags: <ajax><pagination><javascript>
Title: Ajax pagination not loading last entries if not equal to pagination number
ThreadText: # 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](https://craftcms.stackexchange.com/a/9868/193) 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**: @username_1 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**: @username_1 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;
            }
  
          });
        }
  
      });
  });
  
  ```
  
  
  ---
  
  