Ajax load more with filter

Kirby 2 Solved ✅
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;

    });

  });

});