Hello, I need a helping hand.
When clicking on a project, I want to load the project-content into a new div infront of the website.
So far so good I tried some code snippets, but they were reloading the entire site.
Projects snippet:
<?php
$projects = page('projects')->children()->visible();
?>
<main class="wrap">
<?php foreach($projects as $project): ?>
<div class="wrap-item">
<a class="load" data-target="#modal-container" href="<?= $project->url() ?>">
<p>Title: <?= $project->title()->html() ?></p>
<p>Category: <?= $project->category()->html() ?></p>
<p>Year: <?= $project->year()->html() ?></p>
<p>Content: <?= excerpt($project->info()->html(), 20, 'words') ?></p>
</a>
</div>
<?php endforeach ?>
</main>
Project template:
<?php if(!kirby()->request()->ajax()) { snippet('header'); snippet('info'); snippet('projects'); } ?>
<div class="<?php echo $page->uid(); ?>" id="<?php echo $page->uid(); ?>">
<div class="section-inner">
<?php echo $page->title()->html() ?>
<?php echo $page->info()->kirbytext()?>
</div>
</div>
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>
js:
var loading;
$(document).ready(function(){
$('body').append('<section></section>');
$('a.load').click(function(e){
e.preventDefault();
console.log('click');
loadLink($(this)[0].href, true);
});
window.history.replaceState({'data' : window.location.href});
window.addEventListener('popstate', function(event) {
loadLink(event.state.data, false);
});
$('section').hide();
$('section').fadeIn(500);
var done = true;
});
function loadLink(urlload, newS){
loading = true;
console.log(urlload);
console.log('loading');
NProgress.start();
$("html, body").animate({ scrollTop: 0 }, 500);
$('section').fadeOut(500);
$.ajax({
url : urlload,
dataType : 'html'
})
.done(function(data){
console.log('done');
loading = false;
NProgress.done();
if(newS) window.history.pushState({'data': urlload}, $(data).title, urlload);
setTimeout(function(){
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
}, 500);
});
}
(stolen from this post)
Now click a link, it redirects me to a page without header and footer, but reloading makes it normal. But then again, I don’t want to reaload the entire page with header and footer. Maybe you guys have a nice solution?
Thanks in advance
Erik