PHP/AJAX/JSON: How to get data from subpage based on button clicked?

Kirby 2 Questions 🤔
1

I have a very basic AJAX structure set up in order to asynchronously fetch data (a paragraph of text) from subpages when a button is clicked.

The structure starts with the markup of the buttons:

<div id="button_teamMember1" data-member="team-member-1" onclick="load_teamMember()">
   <span>Team Member One</span>
</div>

<div id="button_teamMember2" data-member="team-member-2" onclick="load_teamMember()">
   <span>Team Member Two</span>
</div>

<div id="button_teamMember4" data-member="team-member-3" onclick="load_teamMember()">
   <span>Team Member Three</span>
</div>

When either one of the buttons is clicked, the following script is executed:

function load_teamMember() {
  //
  var memberText = $("#memberText");
  var url = "team.json";
  //
  $.get(url, function(data) {
    memberText.text(data.html);
  });
}

This script accesses the JSON template of my »Team« page. Note that the team page is invisible, it sits in the backend containing the team members as subpages; the content of these subpages is (supposed to be) displayed on a different page, which also contains the buttons mentioned above.

What I would like to achieve is the following: When either of the buttons is clicked, the AJAX script accesses the JSON template and (somehow) fetches the text from the correct/relevant team-member-subpage (i.e. the second button is clicked = the text of Team Member Two is fetched). That’s why I added the data-member attribute; it contains the internal URL of the member’s subpage.

I know how to fetch data statically from a specific subpage via AJAX. That’s what I am currently doing in the JSON template which the script is accessing. It works and looks like this:

<?php
$html = '';

$page = page('j2c-team');
$member = $page->children()->find('team-member-1');
//
$html .= $member->biography();
//
$data['html'] = $html;
echo json_encode($data);

How can I do this dynamically so a click on the button fetches the text of the relevant member?
Is there a way for me to somehow pass the value of data-member of the button clicked on to the JSON template in order to fetch the correspondent subpage of my »Team« page?

I’d greatly appreciate any help with this.

(Note: I’m super new to working with AJAX.)

2

Yes, you have to make a ajax post request that sends the member data to your script. Check out the Ajax load more cookbook recipe, it should give you a good idea how to achieve what you want.

https://getkirby.com/docs/cookbook/ajax-load-more

3

Thanks for the fast reply. I actually started with the recipe you linked to and reduced it to the working example I posted above. What confuses me is the logic of how the script should receive the member data? Where do I send it? As part of the javascript? Or inside the controller?

4

Yes, you send the member as data from your JavaScript to the server. In your Controller, you check if the request is from ajax and then get the data from the post data, similar to how the limit values are handled in the cookbook example.

5

So I can send the data like this?

function load_teamMember() {
  //
  var member = $(this).data("member");
  var memberText = $("#memberText");
  var url = "team.json";
  //
  $.get(url, { name: member }, function(data) {
    element.text(data.html);
  });
}

But how do I then use that data in the JSON template?
Also still a little confused as to what the controller does. Do I need it in my case?

EDIT: Another follow up question – why did you mention using am AJAX post request? The cookbook example uses a get request.

6

Oh, sorry, yes, the example uses a get request, not a post, I didn’t look closely because I was on the phone, not my computer.

A controller contains the logic for your templates, you don’t necessarily have to use it, but it helps to keep your templates clean.

You can fetch the values of the Ajax request (either in your controller in your template), using the get() method, in your case, it would be

$name = get('name');

You can then use this value in your template to get the right page.