Hello
I’m trying to make work the “AJAX load more” tutorial in an other page called “recherches”. The limit to 3 is working but my load-more button don’t get the next projects, and when I click on it, anything happen. Is there a trick to do in the script to call them or is it something else?
In my “recherches.php”
<ul class="projects teaser" data-page="<?php echo $page->url() ?>" data-limit="<?php echo $limit ?>">
<?php foreach($projects as $project): ?>
<?php snippet('project', compact('project')) ?>
<?php endforeach ?>
</ul>
<div class="load-more">Voir la suite</div>
The “recherches.php” controller
$projects = page('projects')->children()->visible();
$count = page('projects')->count();
if(r::ajax() && get('offset') && get('limit')) {
$offset = intval(get('offset'));
$limit = intval(get('limit'));
$projects = $projects->offset($offset)->limit($limit);
$more = $count > $offset + 1;
} else {
$offset = 0;
$limit = 3;
$projects = $projects->limit($limit);
}
return compact('offset', 'limit', 'projects', 'more', 'projects');
The script
$(function(){
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;
});
});
});
Have you created the recherches.json.php template as well?
Rapid answer, yes I forget to share it
"recherches.json.php" is
<?php
$html = '';
foreach($projects as $project) {
$html .= snippet('project', compact('project'), true);
}
$data['html'] = $html;
$data['more'] = $more;
echo json_encode($data);
Do you get any errors in the console?
No errors in the console or in debug mode. Could the errors comes from my Kirby version (2.3.2) ? I read that " With a few changes, you can also make this work in older versions of Kirby." but I supposed 2.3.2 was good enough…In that case, can you explain theses changes ? I’m too advanced in my project to change version
Content representations were introduced in Kirby 2.4.0, so the tutorial won’t work in 2.3.2. You can’t use the json template in 2.3.2 but have to check in your template if the request is an Ajax request (r::ajax())or not, and return the corresponding content (i.e. no header or footer for an ajax call and the json encoded content instead of the standard content).
Ok I was afraid to update the Kirby but I did it in manual by replacing ‘Kirby’ and ‘Panel’ Folder. The bad news for me is that I get the same problem, nothing happen on click to the load-more button 
Please add some console.log() statements in your JS to check if all variables are correct and if the button click is registered at all.
$(function(){
var element = $('.projects');
console.log(element);
var url = element.data('page') + '.json';
console.log(url);
var limit = parseInt(element.data('limit'));
console.log(limit);
var offset = limit;
$('.load-more').on('click', function(e) {
console.log('Hurray, the button was clicked');
$.get(url, {limit: limit, offset: offset}, function(data) {
if(data.more === false) {
$('.load-more').hide();
}
element.children().last().after(data.html);
offset += limit;
});
});
});
I don’t really know how to use console.log. I copied-pasted your script, but nothing else produced. In Firebug, there is no errors. I tried to replace console.log by alert, and I get this (don’t know if can help)
alert(element); => object Object
alert(url); => http://…/recherches.json
alert(limit); => 3
alert(‘Hurray, the button was clicked’); => Hurray, the button was clicked
So far, everything looks good. What do you get when you open the the http://…/recherches.json url?
When I open /recherches.json, I’m redirecting to the whoops.
Undefined variable: more. The $data['more'] = $more; is highlighted
I didn’t change my code since my first comment on top
See PM (and some more chars)
Thanks Texnixe
I wrote
$count = page('projects')->count();
Instead of
$count = $projects->count();