Ajax + content representation

Kirby 3 Solved ✅
1

Hi,

I’m playing arround with ajax and Kirby. In projects page, when a project button is clicked, full project page is loaded via ajax in a popup. All work correctly.

Now, I’m trying to load only some prefered fields instead of full content with content representation, but I do not exactly how to do. default.json.php is created, I can access to json file via url correctly.

But loaded content outputs json format for exemple: {"title":"Exemple 1"} instead of just Exemple 1

Do I need to create a controller? Or maybe do I just have to check with JS?

Thank you for any tips

2

I guess you are returning json from you representation instead of HTML?

3

Yes

4

You might as well return HTML if you need HTML.

5

Something like this works:

function showContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        let title, withajax = "";       
        // contenu.innerHTML = httpRequest.responseText;
        myObj = JSON.parse(httpRequest.responseText);        
        title = "<h1>" + myObj.title + "</h1>";
        withajax =  myObj.withajax ;
        contenu.innerHTML = title+withajax;
        // console.log(JSON.parse(httpRequest.responseText));  
                        
      } else {
        alert('Il y a eu un problème avec la requête.' [links]);
      }
    }
  }```
6

That’s the alternative, yes.

7

Ok, or default.json.php:

<?php

$data = "<article>         
          <h1>".$page->title()->value()."</h1>
         ".$page->withajax()->kirbytext()->value()."
        </article>";

echo json_encode($data);

and js

function showContents() {
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
                  
      contenu.innerHTML = JSON.parse(httpRequest.responseText);      
      console.log(JSON.parse(httpRequest.responseText));  
                      
    } else {
      alert('Il y a eu un problème avec la requête.' [links]);
    }
  }
}