Reload partial content


I have a client that wants a certain component to reload on a timer.
I don’t understand why… But it seems like a good effect I guess…
The reload should be randomized, just like the initial render.

The content is a container of shuffled images and title (pages).
How can I create a Ajax driven reload of this container, so the whole container re-renders without reloading the other things?



This cookbook recipe might be a starting point.

While it loads other content into the container, I think you should bet the idea and should be able to adapt this to reloading your images snippet based not on a button but simply with a timer that calls your Ajax function.


Yes, of course, using a setInterval.
However, I can’t figure out the cookbook recipe, too long, too complicated… :-/
I know I need a js ajax request somewhere, and a php file.
But also – there are js plugins that shuffles the DOM without any requests to server.
Which will be easier to implement?
And which will be the smartest way to do it, regarding performance?


I think I will shuffle it with Kirby on first render.
Then keep shuffling it with js, like this Codepen I made.


If it’s nothing more than a shuffle I’d suggest you search / write a js plugin to do that for you. No need to involve the backend.

Edit: yeah, exactly like your codepen


Yes, I think I have decided for that, too. Thanks.