Need help with Ajax requests with Kirby

Kirby 2 Solved ✅
1

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 https://codyhouse.co/demo/slide-in-panel/index.html.

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.

2

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()?> 
		</div>
	</section>
<?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){
    $.ajax({
	url: url,
	success: function(data) {
	$(target).append(data).addClass('modal');
	$('.modal').fadeIn('slow');
	$(target).find('section').append(button);
	}
    });
  }

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

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

4

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

5

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

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
7

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

EDIT

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