Ajax load more with filter

Kirby 2 Solved ✅
1

Hello,

i use the “ajax load more” described as here: https://getkirby.com/docs/cookbook/ajax-load-more
and it works. Now i want to build a filter function and use PHP for it. This works, but I only get the first 4 results in the right sorted order. If I click ‘load more’ the JSON gives me the old results, which are not in the sorted order I filtered. Do I have to update the JSON somehow? Thx for ur help !

this is my projects.php controller:

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

if(isset($_POST['name'])){
  $results = $page->children()->not('people')->children()->sortBy('sort','asc');
} else if(isset($_POST['date'])){
  $results = $page->children()->not('people')->children()->sortBy('date','asc');
} else{
  $results = $page->children()->not('people')->children()->sortBy('name','desc');
}

$count    = $results->count();

if(r::ajax() && get('offset') && get('limit')) {

$offset = intval(get('offset'));
$limit  = intval(get('limit'));

$results = $results->offset($offset)->limit($limit);

$more = $count > $offset + 1;

} else {

$offset   = 0;
$limit    = 4;
$results = $results->limit($limit);

}

return compact('offset', 'limit', 'results', 'more');

};
2

The problem is that your post variable is not known anymore if the Ajax GET request is sent.

3

ok, and how do i return the variable? Sorry, i am still very new to PHP…

4

You could, for example, send the post variable as a data attribute:

// controller
if(get('name') && get('name') != ''){
    $name = get('name');
 $results = $page->children()->not('people')->children()->sortBy('sort','asc');
} else {
  $name = '';
  $results = $page->children()->not('people')->children()->sortBy('name','desc');
}
//... rest of code
return compact('offset', 'limit', 'results', 'more', 'name');

In your template add a data-name attribute:

data-name="<?= $name ?>"

(where you have the other data attributes)

Then in your JS, get the value and pass it on in your get request (example from the tuturial, modify as needed):

$(function(){

  var element = $('.projects');
  var url     = element.data('page') + '.json';
  var limit   = parseInt(element.data('limit'));
  var offset  = limit;
  // get the value from data-name attribute
  var name = element.data('name');

  $('.load-more').on('click', function(e) {
    // send the value with your Ajax request
    $.get(url, {limit: limit, offset: offset, firstname: firstname}, function(data) {

      if(data.more === false) {
        $('.load-more').hide();
      }

      element.children().last().after(data.html);

      offset += limit;

    });

  });

});