Hi there. I’m trying the to follow the ‘Load More’ tutorial and seem to be stuck. I pretty much don’t know what I’m doing 
I’m really sorry but if someone could help I would really appreciate it!!! I’m getting a undefined
http://localhost/mysite/undefined.json?limit=NaN&offset=NaN
I have as follows:
templates/projects.php
I’ve searched the docs for ‘compact’ can someone explain to me what that is as well?
<?php snippet('header') ?>
<div class="text">
<h1><?php echo $page->title() ?></h1>
<?php echo $page->text()->kirbytext(); ?>
</div>
<div class="showcase"><?php snippet('showcase', compact('showcase')); ?></div>
<button class="load-more">Load more</button>
<?php snippet ('footer')?>
snippets/showcase.php
<div class="showcase">
<?php $projects = page('projects')->children()->visible();
if(isset($limit)) $projects = $projects->limit($limit);?>
<?php if($page->title() == 'Home'): ?>
<h1>Recent Work</h1>
<?php endif; ?>
<ul class="showcase projects" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php foreach($projects as $project): ?>
<li class="showcase-item">
<figure>
<a href="<?php echo $project->url(); ?>">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(600, 500); ?>
<img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="showcase-image" />
<?php endif ?>
<div class="showcase-caption">
<h3 class="showcase-title"><?php echo $project->title()->html() ?></h3>
</div>
</a>
</figure>
</li>
<?php endforeach;?>
</ul>
</div>
controllers/projects.php
<?php
return function($site, $pages, $page) {
$projects = $page->children()->visible();
$count = $projects->count();
// check if the request is an Ajax request and if the limit and offset keys are set
if(r::ajax() && get('offset') && get('limit')) {
// convert limit and offset values to integer
$offset = intval(get('offset'));
$limit = intval(get('limit'));
// limit projects using offset and limit values
$projects = $projects->offset($offset)->limit($limit);
// check if there are more projects left
$more = $count > $offset + 1;
// otherwise set the number of projects initially displayed
} else {
$offset = 0;
$limit = 2;
$projects = $projects->limit($limit);
}
return compact('offset', 'limit', 'projects', 'more');
};
templates/projects.json.php
<?php
$html = '';
foreach($projects as $project) {
// reuse the project snippet to create the HTML for each project
// we need to set the third parameter to true, to return the
// snippet content instead of echoing it
$html .= snippet('showcase', compact('showcase'), true);
}
// add $html and $more to the $data array
$data['html'] = $html;
$data['more'] = $more;
// JSON encode the $data array
echo json_encode($data);
scripts.js
var element = $('.projects');
var url = element.data('page') + '.json';
var limit = parseInt(element.data('limit'));
var offset = limit;
$('.load-more').on('click', function(e) {
$.get(url, {limit: limit, offset: offset}, function(data) {
if(data.more === false) {
$('.load-more').hide();
}
element.children().last().after(data.html);
offset += limit;
});
});
I think its how i have the pages structured but not totally sure.
Thank you!!!
