# Load More with AJAX

**URL:** https://forum.getkirby.com/t/load-more-with-ajax/17949
**Category:** Questions
**Tags:** v3
**Created:** [April 20, 2020, 4:46am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949 "2020-04-20T04:46:59Z")
**Posts on this page:** 9
**Page:** 4

<div class="post-metadata">

### Author: ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)
#### Post date: [August 10, 2023, 10:14pm UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/63 "2023-08-10T22:14:00Z")

</div>

Have you really followed all the steps? Put the JS file in the right place?

I can provide a working Starterkit tomorrow, not on my computer anymore at this time.

---

<div class="post-metadata">

### Author: ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)
#### Post date: [August 10, 2023, 11:01pm UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/64 "2023-08-10T23:01:55Z")

</div>

I’ve tried three times, let me try again with extra focus 😃

Okay so I think the js isn’t working. Here is what I’m noticing.

The class no-js is not changing to js, if I manually change the class to js, the load more button shows up, but it doesn’t do anything. If I have, leave the next/previous (pagination) links, they work and it goes to the next page.

The css and js are in the css/templates and js/templates folders and both are being loaded fine.

Not sure what else I can try…

Getting this error in dev tools.

```auto
photography.js:9 GET http://localhost/k396/photography.json/page:2 404 (Not Found)
fetchProjects @ photography.js:9
photography.js:15 Fetch error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

```

---

<div class="post-metadata">

### Author: ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)
#### Post date: [August 11, 2023, 6:34am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/65 "2023-08-11T06:34:46Z")

</div>

Are you using the PHP built-in server? It doesn’t support dots in URLs.

---

<div class="post-metadata">

### Author: ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)
#### Post date: [August 11, 2023, 6:44am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/66 "2023-08-11T06:44:37Z")

</div>

I’m using XAMPP. No additional php servers.

---

<div class="post-metadata">

### Author: ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)
#### Post date: [August 11, 2023, 11:05am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/67 "2023-08-11T11:05:17Z")

</div>

> [@Milos2504](#):
>
> XAMPP

Guess you are on Windows, then? Then you have to use a semicolon instead of the colon `page;2`

---

<div class="post-metadata">

### Author: ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)
#### Post date: [August 11, 2023, 11:42am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/68 "2023-08-11T11:42:11Z")

</div>

That’s what it was. Thank you!

---

<div class="post-metadata">

### Author: ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)
#### Post date: [August 11, 2023, 9:13pm UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/69 "2023-08-11T21:13:14Z")

</div>

So I went further and implemented the ‘load more’ function on the albums so that it displays 10 photos and then has the option to load more photos.

The issue I now ran into is if I clock on ‘load more’ it breaks the lightbox display of photos. The photos which are loaded on page load open in the lightbox, but with the photos loaded with the load more button the link opens the photos directly, not in the lightbox.

I’m assuming the two features are conflicting each other. Any way of fixing that?

---

<div class="post-metadata">

### Author: ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)
#### Post date: [August 11, 2023, 10:23pm UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/70 "2023-08-11T22:23:40Z")

</div>

> [@Milos2504](#):
>
> I’m assuming the two features are conflicting each other

No, the problem is that there is no event handler on elements newly added to the DOM. Look into event delegation, and then you will have to adapt the JavaScript responsible for the lightbox accordingly.

---

<div class="post-metadata">

### Author: ![Milos2504](https://avatars.discourse-cdn.com/v4/letter/m/e99b99/32.png) [@Milos2504](https://forum.getkirby.com/u/Milos2504)
#### Post date: [August 12, 2023, 5:03am UTC](https://forum.getkirby.com/t/load-more-with-ajax/17949/71 "2023-08-12T05:03:50Z")

</div>

Thank you, that fixed it

[Previous page](https://forum.getkirby.com/t/load-more-with-ajax/17949.md?page=3)
