Simple Ajax page load

Kirby 2 Solved ✅
1

Hi!

I’ve launched our new website with kirby & the kind help of this community: http://debutdebut.com/
Currently I’m want to implement ajax, so the user is able to load the right side of the page (content) asynchron while the left side (navigation) doesn’t get reloaded.

The left side of the page (the navigation) is a snippet which is placed in every site’s template.
A “button” in this navigation works like this:

<?php if ($items = $pages->find('about', 'contact')) : ?>
  <?php if($items and $items->count()) : ?>
    <h2> <!-- start h2-->
      <?php foreach($items as $item) : ?>
        <a<?php e($item->isOpen(), ' class="active"') ?> href="<?php echo $item->url() ?>"><?php echo $item->title()->html() ?></a>
      <?php endforeach ?>
    </h2> <!-- end h2-->
  <?php endif ?>
<?php else: ?>
  <span class="error">Page "Page" not found!</span>
<?php endif; ?>

I learned the basics of jQuery & researched all day, but I’m still struggeling with this particular situation. I’m wondering, if I have to change the situation, so the navigation is no longer a snippet?

Can anyone give me a hint? Would be well appreciated.
Cheers’

2

There are several routes to go down.

Request the complete next page
You could make a ajax call to the next site strip away ererything you don’t need and replace the right column.

Create a route or use parameters
You can make a request to specific route or add parameters to the request and use a controller to output just the html parts you need.

Depending on your needs one of these small solutions works.
If you are not that familiar with jquery or javascript you could also consider using a library for that. For such cases I often use barbajs.

3

Thank’s for the hint! I’m aiming for option one:

Request the complete next page
You could make a ajax call to the next site strip away ererything you don’t need and replace the right column.

I created a new home template for the left side (navigation) and a little js script to load/replace the content for the right side:

$(document).ready(function(){
    $("#test").click(function(){
    	 $( "#target").load("/kirby-2.4.1-ajax/site/test.php #loader", function() {
   		alert( "Load was performed.");
		});
	});
 });

#test is a button and #target a div inside the home template where the content get’s placed. The problem is now, that I can’t access the /site folder. I can access (and load) from other folders like /content. The load gets performed, but no content shows up. I quess this has something to do with privacy? Is there a way around this?

Thank’s for the help!
Cheers’

4

No, you should make an Ajax call to the URL of the page you want to load, not try to load a template from the site folder. Also, check out content representations. You may also want to check out the Ajax Load More recipe from the cookbook. While that is a bit different, the general principle is the same.

Other threads:

5

Thank you @texnixe for the hints & links – I already started to go into content representation and the recipe from the cookbook. It’s basically working already with loading page links instead of the whole template. I will show you guys the final result, as soon as I had the time to properly write the code.

Thanks!