Hi guys,
I have a news page setup like this in the panel.
News Page
- Category 1
- News Title 1
- News Title 2
- Category 2
- News Title 1
- News Title 2
- Category 3
- News Title 1
- News Title 2
- Category 4
- News Title 1
- News Title 2
etc…
What i’m trying to do is cap the limit to 9 articles on first page load. Then using the ajax load more, load in the rest in multiples or even just get the basic function working.
I have followed the cookbooks guide to ajax load more but Im getting the same issue as many others on this forum because im using the built-in php server which doesn’t allow dots. (I briefly looked at the drupal route fix but i don’t really know what im suppost to do with that). I don’t think it will be an issue tho considering im only using the built in server for local development and will be pushing the finished product live.
I’ve tweaked the code a little from the cookbook for news and grandChildren pages (these are the article pages).
Here is my code below.
NEWS.PHP TEMPLATE
<?php snippet('header') ?>
<main class="main" role="main">
<h1><?= $page->title()->html() ?></h1>
<?= $page->text()->kirbytext() ?>
<ul class="news" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<!-- Loop through the projects -->
<?php foreach($news as $new): ?>
<?php snippet('new', compact('new')) ?>
<?php endforeach ?>
</ul>
<button class="load-more">Load more</button>
<?php snippet('footer') ?>
NEW.PHP SNIPPET
<!-- /site/snippets/new.php -->
<li class="new">
<a href="<?= $new->url() ?>" class="new-link">
<div class="new-caption">
<h2 class="new-title"><?= $new->title()->html() ?></h2>
</div>
</a>
</li>
NEWS.PHP CONTROLLER
<!-- /site/controllers/news.php -->
<?php
return function($site, $pages, $page) {
$news = $page->grandChildren()->visible();
$count = $news->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
$news = $news->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 = $news->limit($limit);
}
return compact('offset', 'limit', 'news', 'more');
};
NEWS.JSON.PHP TEMPLATE
<!-- /site/templates/news.json.php -->
<?php
$html = '';
foreach($news as $new) {
// 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('new', compact('new'), true);
}
// add $html and $more to the $data array
$data['html'] = $html;
$data['more'] = $more;
// JSON encode the $data array
echo json_encode($data);
LOADMORE.JS JAVASCRIPT FILE CALLED IN FOOTER BELOW JQUERY.MIN.JS FILE
// assets/js/loadmore.js
$(function(){
var element = $('.news');
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) {
console.log('load more activated');
if(data.more === false) {
$('.load-more').hide();
}
element.children().last().after(data.html);
offset += limit;
});
});
});
The first issue im having seems to be the lack of a limit, I can see that the limit is set to 2 inside the controller. But no limit comes into effect on initial page load. Then secondly when i push this build to the live server nothing happens on load more click. No error message (i get the usual dot error 404 on the built in php server).
I feel like im missing something obvious here but ive double checked my code for errors/spelling mistakes and it all looks gravy.
Can anyone help shed some light on this issue?
A very big T, probably.
The ‘less’ mistake was sloppy, sorry for this. and the count was something i picked up from another post. The names on the templates and controllers both were ofcourse written with an ‘S’ at the end. What made all the difference was the
