Load More with AJAX

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.

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

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.

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

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

I’m using XAMPP. No additional php servers.

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

1 Like

That’s what it was. Thank you!

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?

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.

1 Like

Thank you, that fixed it