Hello!
I’ve tried to adapt the Load more with AJAX cookbook to work so that I can loop through children of "
projects" on my home page.
It almost works, except that the load more button just loads the first four projects again.
Here is my code:
site/templates/home.php:
<?php foreach ($projects as $project): ?>
<?php snippet('project', ['project' => $project]) ?>
<?php endforeach ?>
site/templates/home.json.php:
<?php foreach ($projects as $project) { $html .= snippet('project', ['project' => $project], true); } $json['html'] = $html; $json['more'] = $more; echo json_encode($json); **controllers/home.php:** <?php return function ($page) { $limit = 4; // Set your desired limit $projectsPage = page('projects'); // Adjust the page path as needed $projects = $projectsPage->children()->listed()->paginate($limit); return [ 'limit' => $limit, 'projects' => $projects, 'pagination' => $projects->pagination(), ]; }; **controllers/home.json.php:** <?php return function ($page) { $limit = 4; $projectsPage = page('projects'); $projects = $projectsPage->children()->listed()->paginate($limit); $pagination = $projects->pagination(); $more = $pagination->hasNextPage(); return [ 'projects' => $projects, 'more' => $more, 'html' => snippet('project-list', ['projects' => $projects], true), // Assuming 'project-list' is the snippet for a list of projects. ]; }; **home.js:** const element = document.querySelector('.projects'); const button = document.querySelector('.load-more'); let page = parseInt(element.getAttribute('data-page')); const fetchProjects = async () => { let url = `/home.json?page=${page}`; console.log('Fetching from:', url); try { const response = await fetch(url); const { html, more } = await response.json(); button.hidden = !more; element.insertAdjacentHTML('beforeend', html); page++; } catch (error) { console.log('Fetch error: ', error); } } button.addEventListener('click', fetchProjects);