# How to use AJAX in kirby3

**URL:** <https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300>\
**Category:** Questions\
**Tags:** v3\
**Created:** [August 19, 2019, 6:14am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300 "2019-08-19T06:14:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 6:14am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/1 "2019-08-19T06:14:31Z")

</div>

Hi.

I’m trying to create a site with two templates combined.  
At first I tried with iFrame, but it doesn’t seem to be a good idea.

I have never used AJAX before, and this time I first learned AJAX.  
So I read everything in the Kirby community and the Cookbook, but I don’t know how to use it in my situation.

Can you help me?  
I want to load /site/templates/bookshops.php and /site/templates/programs.php in the /site/templates/home.php file.

Thank you very much for writing the code.  
Please let me know if I need to use a controller or plugin.

Thank you.

 ![q](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/b309ee8f85318adcec1720b3b0222c46e6f30fe6.jpeg)

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 6:17am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/2 "2019-08-19T06:17:21Z")

</div>

What is the purpose of combining two templates? Wouldn’t snippets be a better idea?

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 6:57am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/4 "2019-08-19T06:57:59Z")

</div>

Hello, pixelijn

Because both sides need to be able to upload different posts.

The site looks like this:  
Both sides have different articles.  
Different articles contain different images, articles, layouts, and so on.

Can I solve this problem with a snippet?

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 6:59am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/5 "2019-08-19T06:59:52Z")

</div>

The solution here would be to use different blueprints (for the Panel), but two snippets instead of templates to render those two parts in the home template.

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 7:32am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/6 "2019-08-19T07:32:26Z")

</div>

Thank you for answer.  
But if I use snippets, does the whole screen reload again?  
I want the right side to change when I click the right side, or the left side to change when I click the left side.

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 7:46am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/7 "2019-08-19T07:46:30Z")

</div>

I think there is some information missing. What do you expect to happen when you click what?

You also need some Ajax if you want to load stuff into the page on click without reloading, that much is sure.

Have a look at content representations for this purpose: [https://getkirby.com/docs/guide/templates/content-representations](https://getkirby.com/docs/guide/templates/content-representations)

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 7:52am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/8 "2019-08-19T07:52:24Z")

</div>

The site I want to create is like a site with two iframes.  
link: -

But I don’t want to use iframes because iframes have problems with mobile, refreshing, and youtube playing.

 ![code](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/3/3b38dabdecb97bacba115d5865094b6b58726ac6.png)

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 7:55am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/9 "2019-08-19T07:55:51Z")

</div>

I see. Well, basically, you need two sections. These sections would have a snippet each for each overview. Then when you click on a link, you load the target via Ajax into that section. For this purpose, use content representations of the templates you want to load.

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 10:45am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/10 "2019-08-19T10:45:01Z")

</div>

Sorry for asking for a long time…! 😢😢😢

I don’t know what to put in the snippet.  
And I need an example of how to load ajax.

To clearly communicate my situation I attach a code picture.

 ![00](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/8/80e65e9fe3aaf42ce1d553d3f58bbb38670817e4.png)  
 ![14](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/1/1a68367dfb47eed14bed3b0d2a74aa53c2630241.png)

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 10:51am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/11 "2019-08-19T10:51:35Z")

</div>

1. Since you already load the snippet, there is no reason to try and load it again at document load via Ajax. So your first load can be without Ajax, or alternatively, you do not include the snippet in the home template and load it via Ajax on page load. So not A+B, but A or B.

2. For the Ajax call, you would json\_encode your snippet in the `bookshops.json.php` template, then call the URL `https://your.domain/bookshop.json` (without the PHP extension) in your Ajax request.

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 2:57pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/12 "2019-08-19T14:57:06Z")

</div>

1. Okay. I will do B. I have to use AJAX

2. I write the code as below. But it still doesn’t work.

**site/templates/home.php**

> ```
> <div class="leftscreen" id="leftscreen">
> </div>
> <div class="rightscreen" id="rightscreen">
> </div>
> 
> ```

```
$(document).ready(function(){
	$.ajax({
       type : "GET",
       url : "https://seoulbookshops.kr/bookshop.json",
       dataType : "json",
       error : function(){
       alert('test');
       },
       success : function(data){
       $("#leftscreen").html(data) ;
       }
    });
});	

```

**site/templates/bookshops.json.php**  
` <?php`

```
$data = $pages->find('bookshops')->children()->published()->flip();
$json = [];

foreach($data as $article) {

  $json[] = [
    'url' => (string)$article->url(),
    'title' => (string)$article->title(),
    'text' => (string)$article->text(),
    'date' => (string)$article->date()
  ];

}

echo json_encode($json);

```

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 3:03pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/13 "2019-08-19T15:03:20Z")

</div>

The template must be called `bookshops.json.php`

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 3:15pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/14 "2019-08-19T15:15:21Z")

</div>

Oh right. I wrote so.  
But this still doesn’t work…😢

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 19, 2019, 3:17pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/15 "2019-08-19T15:17:08Z")

</div>

> [@coolcoolhomebody](#):
>
> url : “[https://seoulbookshops.kr/bookshop.json](https://seoulbookshops.kr/bookshop.json)”,

Should be `bookshops`, I guess that is the name of the folder, right?

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 7:05pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/16 "2019-08-19T19:05:36Z")

</div>

Oh I made a very stupid mistake!  
Thank you very much!!!

ajax works fine.  
Because success message comes up, not error message.

But the problem is  
No content appears on the website.  
(No content has been added to the node.)

Is it a problem with the json file?

---

<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:** [August 19, 2019, 8:49pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/17 "2019-08-19T20:49:10Z")

</div>

Do you get the expected content when you open the URL directly in the browser?

Also, what do you get in console if you `console.log(data)`

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 9:56pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/18 "2019-08-19T21:56:11Z")

</div>

Please understand that I use a lot of pictures to clarify my situation.

The content link I want to show  
link: - (bookshops.php)  
And I want to put this content on the left side of (home.php)

And the image below is _bookshops.json.php_ I wrote.  
Actually I don’t know exactly how to write the json file.  
So I copied and pasted the guide example.

 ![44](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/fe13aec29967fd1f813a78d46f0ea1d6f23ae63a.png)

And ajax works but no content.  
If ajax succeeds, the content should be between `<div class = "leftscreen" id = "leftscreen"> </div>,` and appear on the left side of the website.

 ![42](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/f/f3af7092e438ffba23fbd33ae882fc26bad6cfbf.png)

The console contains the following:

 ![28](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/2/235a22d57c17dfdb094c02a529dfd92317732ac9.png)

Please tell me if you need more explanation.  
Thank you.

---

<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:** [August 19, 2019, 10:23pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/19 "2019-08-19T22:23:56Z")

</div>

Ok, what we need to return here is actually some HTML, not a json array.

```auto
<?php 
$bookshops = $pages->find('bookshops')->children()->published()->flip();
$html = snippet('bookshops', compact('bookshops'), true);

echo $html;

```

In your `bookshops.php` snippet something like:

```auto
<?php foreach ($bookshops as $bookshop): ?>
<!-- HTML here -->
<?php endforeach ?>

```

Please never post code as screenshots, we need to be able to copy and paste, no time to copy stuff from screenshots. Thank you.

Offline now.

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 19, 2019, 11:10pm UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/20 "2019-08-19T23:10:59Z")

</div>

Okay. I’m sorry and thank you for letting me know. And from now on I won’t put the code as screenshot

I followed what you said.

1. I put the first code in bookshops.json.php
2. I put the second code in the bookshops snippet and put my html between the code.

After that, the console error went away.  
But still nothing happens.

Also I’ve tested with meaningless text between  
bookshops snippet

```auto
    <? Php foreach ($ bookshops as $ bookshop):?> 
    <!-HTML here-> 
    <? Php endforeach?>

```

But nothing happens.

---

<div class="post-metadata">

**Author:** ![coolcoolhomebody](https://avatars.discourse-cdn.com/v4/letter/c/8e8cbc/32.png) [@coolcoolhomebody](https://forum.getkirby.com/u/coolcoolhomebody)\
**Post date:** [August 21, 2019, 11:27am UTC](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300/21 "2019-08-21T11:27:41Z")

</div>

anyone help me 😂

[Next page](https://forum.getkirby.com/t/how-to-use-ajax-in-kirby3/15300.md?page=2)