Need help with Ajax requests with Kirby

Hi, I’m sorry if my question is too open but it is so because I’m a noob in Javascript.

I need to build a ‘Slide-in’ panel like this

I am working in a very simple page structure with articles in the main page and I want them to open in a panel like that, instead of opening another page.

I can replicate this, but I do not have a clue on how to call the content of the page to appear inside it.

I saw some examples, but they were database or JSON related.

Can anyone give me a direction? I’d appreciate some piece of code to work on.

Well, I don’t know if this helps, but this is an example of loading a page in a modal via ajax. You would have to adapt this to your use case:

In the link, I use a data target (the element where the content should go) so that I can use the function for various calls with different targets:

<a class="load" data-target="#modal-container" href="<?php echo $page->url() ?>"><?php echo $page->title()->html()) ?></a>

The template is quite normal, except it loads the header and footer only if it’s not an ajax call. If Javascript is disabled, the content is loaded into a separate page.

<?php if(!kirby()->request()->ajax()) { snippet('header'); snippet('nav-main'); } ?>
	<section class="<?php echo $page->uid(); ?>" id="<?php echo $page->uid(); ?>">
		<div class="section-inner">
			<h1><?php echo $page->title()->html() ?></h1>
			<?php echo $page->text()->kirbytext()?> 
<?php if(!kirby()->request()->ajax()) { snippet('footer'); } ?>

And the jQuery bit:

  var url = $('.load').data('url');
  var button = $('<button class="btn close" data-url="' + url + '" onclick="closeModal()">x</button>');
  function openUrlInModal(url, target){
	url: url,
	success: function(data) {

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

This works! It will take a lot of tweaking to fit my layout, but it will do.

I had to put the ajax conditional for header/footer inside the snippet itself, it wasn’t working if put in the template.

One thing: What is the easiest way to prevent the content to load on top of the previous?

There need to be a line of code to destroy/unload the previous content after I click in a second url

Thank you

This depends. Do you want to close the slide-on panel before you load new content?

Not really, I want to achieve something like this:

Case 1: User clicks another URL and the slide content is refreshed.
Case 2: User clicks the same URL and nothing happens

In the current function, new content is being added to the slide after each click

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;
		loadLink($(this)[0].href, true);

     window.history.replaceState({'data' : window.location.href});
     window.addEventListener('popstate', function(event) {
			loadLink(, false);

	var done = true;

function loadLink(urlload, newS){
	loading = true;
     $("html, body").animate({ scrollTop: 0 }, 500);
    url : urlload,
    dataType : 'html'
     loading = false;
	   if(newS) window.history.pushState({'data': urlload}, $(data).title, urlload);
		var newDoc ="text/html", "replace");
     }, 500);

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


Yes, it did the job!

One more thing: Is there a way to disallow the opening of links in new tab/window?

The ajax conditional for header/footer does not seem to work in this case and the page is loading without any style


Nervermind, I got it to work. It was a problem with absolute links to the assets