Ajax shuffle problem

The CMS Questions
1

Hello everyone,

My problem: I have a team page with team members as subpages. Now I’m trying to shuffle four team members on the home page via Ajax when the user clicks on the reload button (I’m using the cookbook recipe as a guide). On my local server (Mamp) it works fine. But on the production server, after the second click, no new items are loaded, only clones of the previous images are created. When I open the console, everything works again.

Very strange behavior. Any ideas? I’m using kirby 3.9.3 with PHP 8.2
Thanks.

Template home.json.php:

<?php

$members = getPageByTemplate('members')->children()->listed()->shuffle()->limit(4);

foreach($members as $member) {
  if ($memberImage = $member->img()->toFile()) {
    $html .= snippet('page/home-member', ['memberImage' => $memberImage], true);
  }
}

$json['html'] = $html;
echo json_encode($json);

JS:

const grid = document.querySelector('.js-members');
const button = document.querySelector('.js-load-images');

const fetchMembers = async () => {
  grid.replaceChildren();
  let url = `${window.location.href}home.json`;
  try {
    const response = await fetch(url);
    const { html } = await response.json();
    grid.insertAdjacentHTML('beforeend', html);
  } catch (error) {
    console.log('Ajax fetch error: ', error);
  }
}

button.addEventListener('click', fetchMembers);
2

i think should be:

let url = `${window.location.href}/home.json`;

missing slash there maybe causing it?

3

let url = ${window.location.href}/home.json;

Unfortunatelly not. But thanks.

4

Could you please describe the problem in more detail, not sure I understand what exactly is happening. So after initial load you can click the button 1 time, and new member pics are loaded, but not on second click? If so, do they stay the exact same or does their order change?

What I’m wondering is

  1. if there are any more members on your remote server?
  2. if it’s some sort of caching issue?

Do you actually get any console errors?

5

Okay, I try to describe it more detailed:

  1. Page is loaded, the first row of team images (4) are shown
  2. When the user clicks on the load more button, next 4 team images appears (they replace the first row)
  3. When the user clicks on the button again, no new images are loaded, but the last 4 images are duplicated. They stay in the exact same order

There are round about 80 team members (published subpages) on the remote server

Cache is disabled (website is still in development)

The problem is: if I activate the console, everything works fine :upside_down_face:

6

Still, given that the issue doesn’t happen on localhost but does on your remote server but not with the console/dev tools (and therefore browser caching disabled) my guess is that this is something to do with caching. what if you enable server side caching in Mamp settings (OPcache)?

Screenshot 2023-05-02 at 19.57.17
Screenshot 2023-05-02 at 19.57.17846×342 47.1 KB

7

Everything works fine on localhost with the enabled OPcache

Another hint: On the project site I use the “ajax load more” receipe from the cookbook and it works fine, both on localhost and remote server

8

After some research, I think the problem has to do with browser caching (the browser caches the ajax request). Is there any way to prevent caching in my js code above?

9

I thought that as well, the fact that with console open it works, already points to that.

Compare the network requests/responses you get from local vs those from remote.