Need help with Ajax requests with Kirby

Kirby 2 Solved ✅
6

Have you had a look at the code from mnmlst theme, Simple Ajax tutorial for Kirby?? This is the ajax code that does the page loading:

var loading;
$(document).ready(function(){
     $('a.internal').click(function(e){
    	 e.preventDefault();
		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);
	
  NProgress.start();
     $("html, body").animate({ scrollTop: 0 }, 500);
  $('section').fadeOut(500);
  
  $.ajax({
    url : urlload,
    dataType : 'html'
  }).done(function(data){
     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);
  });
}

Edit: If you use my code from the previous answer, you can just remove all content before you load new content.

3 Likes