# Simple Ajax page load

**URL:** <https://forum.getkirby.com/t/simple-ajax-page-load/7354>\
**Category:** Questions\
**Tags:** v2\
**Created:** [April 28, 2017, 4:38pm UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354 "2017-04-28T16:38:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DebutDebut](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/debutdebut/32/3639_2.png) [@DebutDebut](https://forum.getkirby.com/u/DebutDebut)\
**Post date:** [April 28, 2017, 4:38pm UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/1 "2017-04-28T16:38:52Z")

</div>

Hi!

I’ve launched our new website with kirby & the kind help of this community: [http://debutdebut.com/](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’

---

<div class="post-metadata">

**Author:** ![lukaskleinschmidt](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lukaskleinschmidt/32/13388_2.png) [@lukaskleinschmidt](https://forum.getkirby.com/u/lukaskleinschmidt)\
**Post date:** [April 29, 2017, 9:00am UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/2 "2017-04-29T09:00:13Z")

</div>

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](http://barbajs.org/index.html).

---

<div class="post-metadata">

**Author:** ![DebutDebut](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/debutdebut/32/3639_2.png) [@DebutDebut](https://forum.getkirby.com/u/DebutDebut)\
**Post date:** [April 29, 2017, 5:03pm UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/3 "2017-04-29T17:03:30Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 29, 2017, 5:23pm UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/4 "2017-04-29T17:23:32Z")

</div>

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](https://getkirby.com/docs/developer-guide/advanced/representations). You may also want to check out the [Ajax Load More](https://getkirby.com/docs/cookbook/ajax-load-more) recipe from the cookbook. While that is a bit different, the general principle is the same.

Other threads:

> [@Load Subpages via ajax into a DIV in a sequence](https://forum.getkirby.com/t/load-subpages-via-ajax-into-a-div-in-a-sequence/6439):
>
> Hi, I am trying to create onePager as a basis for my portfolio page that should load its content via AJAX into an overlay div. The div contains an Ajax container as a data-target and prev / next links. The site should not reload on click because it is playing music or video or animations in the background. The content is organized in subpages of the main page. CONTENT 1-home ---1-about -----section.txt -----media.jpg ---2-works -----section.txt -----media.jpg ---3-whatnot ... I created a…

> [@Need help with Ajax requests with Kirby](https://forum.getkirby.com/t/need-help-with-ajax-requests-with-kirby/2361/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

---

<div class="post-metadata">

**Author:** ![DebutDebut](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/debutdebut/32/3639_2.png) [@DebutDebut](https://forum.getkirby.com/u/DebutDebut)\
**Post date:** [May 5, 2017, 8:32am UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/5 "2017-05-05T08:32:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:50pm UTC](https://forum.getkirby.com/t/simple-ajax-page-load/7354/6 "2025-02-06T16:50:01Z")

</div>

Archived on February 6, 2025, 4:50pm UTC