0

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

  • 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 Feb 16 '18 at 14:02
  • @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 Feb 16 '18 at 14:17
  • @RobinSchambach have added link to pastebin with full template. – CreateSean Feb 16 '18 at 14:22
  • 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 Feb 16 '18 at 14:22
  • 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 Feb 16 '18 at 14:29
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;
          }

        });
      }

    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.