Hey there,
Guided by the K2 Load More tutorial, Iām trying to have a single page (projects.php) house two sections with thumbnails of both projects (project.php) and also āresourcesā (resource.php). In terms of content structure, it goes āProjectsā > āProjectā and āResourcesā > āResourceā.
For some reason, everything works fine on using the Load More button for the projects, but with the Resources, it seems to completely ignore the count, offset and limit and not only loads all of the resource blocks into the container, but loads each one twice. This doesnāt seem to be happening in my resources.json file, which is super strange!
My code and jQuery is split entirely into two (very sloppy, I know), as you can probably see, because for the life of me Iāve tried everything and this has got me the closest.
I think this may be complicated by multiple content representations etc.
Heres the html for the āProjects sectionā
<div class="grid grid--3-col projects" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php foreach( $projects as $project ) : ?>
<?php snippet('project', compact('project')) ?>
<?php endforeach ?>
</div>
Then for the āResourcesā section
<?php $resourcePage = $pages->find('resources') ?>
<div class="grid grid--3-col resources" data-page="<?= $pages->find('resources')->url() ?>" data-r_limit="<?= $r_limit ?>">
<?php foreach ( $resources as $resource ) : ?>
<?php snippet('resource', compact('resource') ) ?>
<?php endforeach ?>
</div>
Iām using the controller of the āProjects.phpā page, because thatās where itās all getting displayed:
<?php
return function( $site, $pages, $page ) {
// Set PROJECT variables
$projects = $page->children()->listed()->offset(3);
$count = $projects->count();
$more = false;
// Resources
$resources = $pages->find('resources')->children()->listed();
// check if the request is an Ajax request and if the limit and offset keys are set
if(
!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
&& 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 + $limit;
// otherwise set the number of projects initially displayed
} else {
// PROJECTS
$offset = 0;
$limit = 6;
$projects = $projects->offset($offset)->limit($limit);
// Resource variables for page load
$r_offset = 0;
$r_limit = $limit;
$resources = $resources->offset($r_offset)->limit($r_limit);
}
return compact('offset', 'limit', 'projects', 'more', 'r_offset', 'r_limit', 'resources', 'r_more');
}
?>
But then also the controller of the āresources.phpā page handles some of the logic for creating the content representation:
<?php
return function( $site, $pages, $page ) {
$resources = $pages->find('resources')->children()->listed();
$r_count = $resources->count();
$r_more = false;
if(
!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
&& get('r_offset')
&& get('r_limit')
) {
// convert limit and offset values to integer
$r_offset = intval(get('r_offset'));
$r_limit = intval(get('r_limit'));
// limit projects using offset and limit values
$resources = $resources->offset($r_offset)->limit($r_limit);
// check if there are more projects left
$r_more = $r_count > $r_offset + $r_limit;
// otherwise set the number of projects initially displayed
}
return compact('r_offset', 'r_limit', 'resources', 'r_more');
}
?>
jQuery:
function loadMoreProjects() {
var element = $('.projects');
var url = element.data('page') + '.json';
var limit = parseInt(element.data('limit'));
var offset = limit;
var projects = true;
$('.load-more-projects').click(function(e) {
$.get(url, {limit: limit, offset: offset, projects: projects}, function(data) {
if(data.more === false) {
element.next().hide();
}
element.children().last().after(data.html);
offset += limit;
});
});
}
function loadMoreResources() {
var r_element = $('.resources');
var r_url = r_element.data('page') + '.json';
var r_limit = parseInt(r_element.data('r_limit'));
var r_offset = r_limit;
var resources = true;
$('.load-more-resources').click(function(e) {
$.get(r_url, {r_limit: r_limit, r_offset: r_offset, resources: resources}, function(r_data) {
if(r_data.r_more === false) {
r_element.next().hide();
}
r_element.children().last().after(r_data.r_html);
r_offset += r_limit;
});
});
}
And the content representations are basically exactly the same except with different variables, ie ā$moreā vs ār_moreā.
Long-winded but I hope someone out there is able to help!
Thank you,