Hi,
I am currently working myself throught the Load more with ajax example but I want to use it on a my default page aka the homepage as a microblog.
Everything works well, except that the json file is not read correctly. I use the correct classname for the data source but I cant figure out how to decode the JSON File.
When I log it it gives me an empty .JSON and or a home.
What am I missing?
Many thanks in advance
Could you please post what you have so far and what your structure looks like?
Sure, the structure is a little different and the blog entries are sections. Ssection contains the sections which all seems to work well imitially, e.g. when I change the limit value the according number of entries is rendered with the according content.
The javascript works except the $.get() which is not entered since the var url = element.data('page') + '.json'; obviously results in an empty string or in a"home" when I resolve the url but never in a default.json.php (which is expected?) . I guess at this point I am missing something.
templates/default.php
<?php foreach ($sections as $section): ?>
<?php snippet('section', compact('section')) ?>
<?php endforeach?>
<button id="load-more">Load more</button>
templates/default.json.php
<?php
$html = '';
foreach($sections as $section) {
$html .= snippet('section', compact('section'), true);
}
$data['html'] = $html;
$data['more'] = $more;
echo json_encode($data);
controllers/default.php
<?php
return function($site, $pages, $page) {
$sections = $page->children()->visible();
$count = $sections->count();
if(r::ajax() && get('offset') && get('limit')) {
$offset = intval(get('offset'));
$limit = intval(get('limit'));
$sections = $sections->offset($offset)->limit($limit);
$more = $count > $offset + 1;
} else {
$offset = 0;
$limit = 1;
$sections = $sections->limit($limit);
}
return compact('offset', 'limit', 'sections', 'more');
};
js/scripts/site.js
$(function(){
var element = $('.journal');
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;
});
});
});The problem seems to be that the home page redirects to /. So maybe content representations don’t work here, at least I can’t get it to work, @lukasbestle?
Alternative: Do it without content representations.
Content representations on the homepage look like this:
http://example.com/.json
Ah, ok, thanks.
So the javascript should look like this:
var element = $('.journal');
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;
});
});
With a default.php template like this:
<?php snippet('header'); ?>
<section class="journal" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php foreach ($sections as $section): ?>
<?php snippet('section', compact('section')) ?>
<?php endforeach?>
</section>
<button id="load-more">Load more</button>
<?php snippet('footer') ?>
Thanks, the url is correct now but the $.get() request is not working and nothing is happening, when I click the button. I am wondering if it works with this type of url and will try $.ajax() to get the error.
What is your home text file called? If it is called home.txt, save default.php template and controller as home.php. Makes more sense anyway.
It is home.txt but when I rename the mentioned files I get a 404 again. May be I am overlooking something else. Thanks anyway.
Ok, here’s the complete solution again:
textfile: home/default.txt
controller: default.php
<?php
return function($site, $pages, $page) {
$sections = $page->children()->visible();
$count = $sections->count();
if(r::ajax() && get('offset') && get('limit')) {
$offset = intval(get('offset'));
$limit = intval(get('limit'));
$sections = $sections->offset($offset)->limit($limit);
$more = $count > $offset + 1;
} else {
$offset = 0;
$limit = 1;
$sections = $sections->limit($limit);
}
return compact('offset', 'limit', 'sections', 'more');
};
<?php snippet('header'); ?>
<section class="journal" data-page="<?= $page->url() ?>" data-limit="<?= $limit ?>">
<?php foreach ($sections as $section): ?>
<?php snippet('section', compact('section')) ?>
<?php endforeach?>
</section>
<button id="load-more">Load more</button>
<?php snippet('footer') ?>
<?php
$html = '';
foreach($sections as $section) {
$html .= snippet('section', compact('section'), true);
}
$data['html'] = $html;
$data['more'] = $more;
echo json_encode($data);
var element = $('.journal');
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;
});
});
Did exactly like this and got 404 regarding http://localhost:4000/.json?limit=1&offset=1
And how is this topic solved when @carstenh 's last reply was an error 404?
Probably because he liked the last answer which was then regarded as solving the problem.
Edit: Without your file structure and the actually used code it’s impossible to tell what’s going wrong, as the example did and does work in my test installation.
Hey there.
@daybugging Funny thing for me was, on development it just didn’t work, but on live server just as expected.
Only problem for me is the following:
The button only hides after all content is loaded, but I’d like it to do something upon reaching the last item, so 5 left, I click “load-more” button, everything loads & when I scroll down, past the last item, the button has changed / is hidden.
Thanks for the effort, you guys are great.