How to load page content using Ajax?

The CMS Questions
1

Hi,

As a solution suggested from my last forum topic, I needed to load the full contents of my products using Ajax.

I have been reading and searching about Ajax for hours now and I’m getting at least the basics of it. I can fetch data from a text file, from a JSON file and I can now also use Ajax with PHP forms.

My problem though is I still don’t know how to make it work with Kirby. Or at least to make it work from my current project. I have not seen any examples or existing topics that I can understand.

Basically, I have a menu page that lists all its grandchildren styled as thumbnails. What I want to do is to show the full details of the grandchild (thumbnail) when clicked on a side panel. Initially, this panel is hidden and only shows when a thumbnail is clicked.

My struggle is how do I fetch the data and output it on the side panel. I would really appreciate if someone could help or link me to an example with the same or close to my requirements and uses Kirby.

Thank you.

2

  1. Create a json content representation for the grandchildren: https://getkirby.com/docs/guide/templates/content-representations

  2. When user clicks on thumbnail, your JavaScript listener kicks in and calls the URL of the json representation of that grandchild (you can store it in a data attribute in your HTML, it would be the url of the page + the .json extension).

  3. When the data comes back from server, inject it into the DOM.

You can find jQuery examples of fetching data via Ajax in these Kirby 2 recipes:

http://k2.getkirby.com/docs/cookbook/category:ajax

3

Ok, so this is what I’ve been missing. I’ll have to output it first as a JSON then use AJAX + JS inject into the DOM. :grinning::blush:

4

Please, always consider (and build) this as progressive enhancement :pray:.

5

Ok so I have managed to solve this. I used jQuery to fetch the data via Ajax.

Now I’m trying to convert the jQuery to vanilla JavaScript but got stuck on one issue. How do I get the getAttribute('href') of the clicked item?

Here’s WIP vanilla javascript

const dishes = document.querySelectorAll('.dish__thumb');
  dishes.forEach((dish) => {
    dish.addEventListener('click', function(e) {
      e.preventDefault();
      getDishContent();
    });
  });

  function getDishContent() {
    var xhr = new XMLHttpRequest();
    var url = document.querySelector('.dish__thumb').getAttribute('href');
    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.onload = function() {
      if (this.status == 200) {
        console.log('ok');
        document.getElementById('dish__info').innerHTML = this.response;
      }
    }

    xhr.send();
  }

This is the part I’m lost

var url = document.querySelector('.dish__thumb').getAttribute('href');

With this current code, only the first item works. Which I believe is expected but I am not sure how to solve it.

6

Nevermind :point_up_2:

I needed a break only. :grinning:

I solved it by passing a parameter.

Working code

const dishes = document.querySelectorAll('.dish__thumb');
  dishes.forEach((dish) => {
    dish.addEventListener('click', function(e) {
      e.preventDefault();
      var url = this.getAttribute('href');
      getDishContent(url);
    });
  });

  function getDishContent(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

    xhr.onload = function() {
      if (this.status == 200) {
        console.log('ok');
        document.getElementById('dish__info').innerHTML = this.response;
      }
    }

    xhr.send();
  }
3 Likes