Pagination returning error on page:3

Kirby 2 Solved ✅
1

Ajax or not I am having a hard time making the pagination work. I followed the tutorial https://getkirby.com/docs/cookbook/pagination but the same result.

heres the code from the tutorial

<?php
$count = 1;
$articles = page('blog')->children()->visible()->paginate(6);
foreach($articles as $article): ?>

<article>
  <?php echo $count.'. ' ?><?php echo $article->title() ?>
</article>

<?php $count++; endforeach ?>

<?php if($articles->pagination()->hasPages()): ?>
  <?php if($articles->pagination()->hasNextPage()): ?>
    <a class="next" href="<?php echo $articles->pagination()->nextPageURL() ?>">&lsaquo; older posts</a>
  <?php endif ?>

  <?php if($articles->pagination()->hasPrevPage()): ?>
    <a class="prev" href="<?php echo $articles->pagination()->prevPageURL() ?>">newer posts &rsaquo;</a>
  <?php endif ?>
<?php endif ?>

the blog page has 18 articles. pagination in page:2 works but page:3 onwards wont.

2

The code should work. Have you tested without Ajax? And are all these 18 articles visible (because you are filtering by visible)?

What do these echo statements return?

echo $articles->pagination()->countitems();
echo $articles->pagination()->countpages();

Edit: Looks as if this has already been solved, what was the problem?

3

conflict in my controller. apologize for that

4

@texnixe i have new problem.

ajax seems to work only in page:2 but on page:3 it loads the page:3 page. I find it very weird.

heres my controller

return function($site, $pages, $page) {

  $Numberoftags = $page->number_of_popular_tags()->int();
  $perpage  = $page->perpage()->int();

  $articles = $page->children()
             ->visible()->filterBy('date', '<=', time())->sortBy('date', 'desc')
             ->paginate($perpage);
   
  $tagcloud = tagcloud(page('blog'), array('limit' => $Numberoftags));

  $isarticles = $page->children()->visible()->filterBy('date', '<=', time());
  $isfeatured = $isarticles->flip()->first();
  $pagination = $articles->pagination();
  $tagcloud = $tagcloud;

  if(kirby()->request()->ajax()){
      // in ajax request - this snippet will be returned by the server.. the site and page object should be redeclared in here...
      // in ajax, the global objects are unknown
      exit(snippet('blog/blog-area', compact('articles','tag', 'perpage', 'pagination','tagcloud'), true));
      
  } else {
      return compact('articles','tag', 'perpage', 'pagination','tagcloud');
  }
};

my JQUERY

    $('#prevPage, #nextPage').click(function(e){
    e.preventDefault();
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        dataType: 'html',
        success: function(data){
          $('#blog-section').html(data);
          console.log(data);
      },
      error: function(result,statTxt){
          var msg = 'Error '+ result.status + ' - unable to fetch posts: ' + result.statusText + " (" + statTxt + ")";
          
      }
  })
});

my TEMPLATE

     <?php foreach($isarticles->flip()->not($isfeatured)->paginate($perpage) as $article): ?>   
        <div class="uk-width-1-3">
            <div class="blogArea-lg">
                <a href="<?php echo $article->url() ?>" class="hvr-icon-wobble-horizontal">
                    <div class="uk-panel">
                        <p class="uk-article-meta">
                            <time datetime="<?php echo $article->date() ?>">
                             <?php echo $article->date('F j, Y');  ?> - <?php echo relativeDate($article->date('Y-m-d')) ?>
                         </time>
                     </p>
                     <p class="uk-article-lead">
                        <?php echo $article->title()->html() ?>
                        <span class="rightBlog-angle uk-icon-angle-right"></span>
                    </p>
                </div>
            </a>
        </div>
    </div>
<?php endforeach ?>


<?php if($pagination->hasPages()): ?>
    <?php if($pagination->hasPrevPage()): ?>
        <div class="prev-next-prev" style="">
            <a id="prevPage" href="<?php echo $pagination->prevPageURL() ?>" class="hvr-icon-wobble-horizontal"><span class="uk-icon-angle-double-left"></span>&nbsp;&nbsp; <?php echo page('blog')->pagination_left()->text() ?></a>
        </div>
    <?php endif ?>
    <?php if($pagination->hasNextPage()): ?>
        <div class="prev-next">
            <a id="nextPage" href="<?php echo $pagination->nextPageURL() ?>" class="hvr-icon-wobble-horizontal"><?php echo page('blog')->pagination_right()->text() ?><span class="uk-icon-angle-double-right"></span></a>

        </div>
    <?php endif ?>  
<?php endif ?>
5

For reference:

One problem here is that the pagination buttons are loaded in the snippet. So the jQuery in your footer knows nothing of what to make it that and the third page is not loaded via XHR but as a normal link. To prevent that behavior, you’d have to bind the event to an element, rather than just using the normal click event.

See http://api.jquery.com/on/

$('#blog-section').on('click', '#prevPage, #nextPage', function(e){