Ajax request loads new site

javascript

#1

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.

Demo

09

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 :ok_woman:

Erik


#2

Isn’t this: https://getkirby.com/docs/cookbook/ajax-load-more pretty much what you want?


#3

I’ll look into it, I thought that this is something different. Thanks


#4

I’m using

var url = $('.load').data('url');
var button = $('<button class="btn close" data-url="' + url + '" onclick="closeModal()">x</button>');
$(document).ready(function(){
  function openUrlInModal(url, target){
  NProgress.start();
    $.ajax({
    	url: url,
    	success: function(data) {
        console.log('hello');

      	$(target).append(data).addClass('modal');
      	$('.modal').fadeIn('slow');
      	$(target).find('section').append(button);
        NProgress.done();
    	}
    });
  }

  $('.load').bind('click', function(e) {
    var target = $(this).data("target");
    e.preventDefault();
    window.scrollTo(0,0);
    openUrlInModal($(this).attr('href'), target);
 });
});

in my main.js now and it’s working.

Some tasks just complete themselfes while questioning.

Erik