How to use AJAX in kirby3

[coolcoolhomebody]

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.

[pixelijn]

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

[coolcoolhomebody]

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?

[pixelijn]

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.

[coolcoolhomebody]

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.

[pixelijn]

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

[coolcoolhomebody]

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.

[pixelijn]

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.

[coolcoolhomebody]

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.

[pixelijn]

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.

[coolcoolhomebody]

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);

[pixelijn]

The template must be called bookshops.json.php

[coolcoolhomebody]

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

[pixelijn]

@coolcoolhomebody

url : “https://seoulbookshops.kr/bookshop.json”,

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

[coolcoolhomebody]

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?

[texnixe]

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)

[coolcoolhomebody]

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.

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.

The console contains the following:

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

[texnixe]

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

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

echo $html;

In your bookshops.php snippet something like:

<?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.

[coolcoolhomebody]

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

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

But nothing happens.

[coolcoolhomebody]

anyone help me