Hello everyone,
Im trying to get my head around Kirby and its fantastic.
But I have been trying to implement load more ajax on my blog, and everything is going right except for receiving a 404 with my json… Ive looked all over forums for my same problems and have not been able to find a solution.
This is the error message on my console:
“GET http://localhost:8000/james-oh/journal.json?limit=2&offset=2 404 (Not Found)”
It seems to be a routing problem to the journal.json.php file. Please help! issues been bugging me all week!
CODE:
Journal template:
<?php snippet('header') ?>
<main class="journal-container" role="main" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php if($articles->count()): ?>
<?php foreach($articles as $article): ?>
<?php snippet('journal-entry', compact('article')) ?>
<?php endforeach ?>
<?php else: ?>
<p>No articles yet.</p>
<?php endif ?>
<button class="load-more">Load more</button>
</main>
<?php snippet('footer') ?>
Journal Snippet:
<div class="journal-group">
<header class="article-header">
<a href="<?= $article->url() ?>">
<span class="article-date">
<?= $article->date('d m Y') ?>
</span></a>
<a class="article-title" href="<?= $article->url() ?>">
<?= $article->title()->html() ?>
</a>
</header>
<span class="article-image">
<?php snippet('coverimage', $article) ?>
</span>
</div>
<div class="article">
<div class="article-body">
<p><?= $article->text()->kirbytext() ?></p>
</div>
</div>
Journal Json:
<?php
$html = '';
foreach($articles as $article) {
// 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('journal-entry', compact('article'), true);
}
// add $html and $more to the $data array
$data['html'] = $html;
$data['more'] = $more;
// JSON encode the $data array
echo json_encode($data);
Journal Controller:
<?php
return function($site, $pages, $page) {
$articles = $page->children()->visible();
$count = $articles->count();
if(r::ajax() && get('offset') && get('limit')) {
echo "yo!";
exit();
// convert limit and offset values to integer
$offset = intval(get('offset'));
$limit = intval(get('limit'));
// limit projects using offset and limit values
$articles = $articles->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;
$articles = $articles->limit($limit);
}
return compact('offset', 'limit', 'articles', 'more');
};
Script:
var element = $('.journal-container');
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;
});
});
Thank you! I look forward to hearing your help!
James.
