Load more with Ajax: "undefined.json?limit=NaN&offset=NaN"

Kirby 2 Solved ✅
1

Hej there :slight_smile:

Well it’s been quite a while since I have been working with Kirby and thus I’m having trouble getting blog posts to work by having them loaded via Ajax, as described here.

When clicking the “Load more” button, console error says (The Domain name is just an example):

GET http://www.domain.com/undefined.json?limit=NaN&offset=NaN 404 (Not Found)

I’m getting told the error occurs from the vendor jquery file, I understand that means when the jQuery function gets called, jQuery detects problems with using/ rendering it? Kirby is Version 2.4.1, jQuery is Version 2.2.4… I didn’t set representations.accept in the configuration file.

2

Have you debugged your element and url variables? Maybe just a typo/error regarding the selected element.

var element = $('.projects');

If this does not exist, you get an undefined error in the next line.

var url     = element.data('page') + '.json';
3

[…]

templates/projects.php

(Excerpt; Inline style temporary)

    <div data-limit="<?php echo $limit ?>" data-page="<?php echo $page->url() ?>" style="display:inline-block;margin:0 0 30px;">
        <?php foreach($projects as $project): ?>
            <?php snippet('project', compact('project')) ?>
        <?php endforeach ?>
    </div>

    <div class="col-sm-12 text-center">
        <button class="btn btn-load-more" title="<?php echo l::get('load-more') ?>">
            <?php echo l::get('more') ?>
        </button>
    </div>

[…]

4

As I suspected, the element that contains the data-page attribute does not have a class of projects. So your code cannot possibly work.

<div data-limit="<?php echo $limit ?>" data-page="<?php echo $page->url() ?>" style="display:inline-block;margin:0 0 30px;">

Enabling debug mode in Kirby does not help here, as this is a pure JavaScript problem. What I meant was debug the JavaScript, using console.log(element), for example.

1 Like
5

D’oh! :bulb: :innocent:

Thanks for pointing out the missing class.