Use jQuery .load() with twig

Archive
1

First of all, I’m a total noob in Grav, twig and yaml.
I’m trying to convert my website into a Grav-template (for personal use). In the site I had a portfolio section in which the projects loaded on click. I did this with jQuery (that’s ajax I think):

('#someProject').on('click', function() {
   ('.someTarget').load('someProject.html');
});

I’d wish to have the same functionallity, but with a Grav-template, so that the client can add projects and change the content. The projects contain a lot of images so I don’t think loading them al at the beginning would be a good idea.
Is there a possibility/alternative to do this with twig?
Thanks!

2

Technically you can do that same thing with Grav. Twig is not a substitute for jQuery/javascript.

As you start out, you can freely load your .html file as you’re doing now, and then look at nicer solutions later down the road.

If the problem are just the images, you can load all the projects at once and then lazy load the images on demand, like using something like http://luis-almeida.github.io/unveil/

3

Thanks!
When I load a twig file with jQuery, the variables do not get rendered, they just appear as {{ some.variable}} . Is there a way to fix that?
In case there isn’t, I’ll work my way around by lazy loading the images.

4

You’d need to load the resulting processed file, not the Twig-template. In any regard, lazy-loading many images is good practice.