Creating endpoint for part of webpage to reload that only part while not reloading other areas

Support Plugins
1

Here is the function i want:
this is my page with many cards.
Each card have same skeleton but different contents, i control cards with giving them numbers starting from 1. like card 1, card 2, card 3.
At cards there are randomized numbers that i set. when i refresh page those numbers change.
What i want is not refreshing whole page but just the card so other cards wont get effected and user wont need to load whole page for just one card.
To make this i found how to load page in card. but it loads whole page in card so it look like this:

resim
resim1370×1427 61.2 KB

To solve this problem we thought we can create pages for each card.
For example this page’s uri is ww.asdf.comm/grt
for first card we may create a web page named: ww.asdf.comm/grt/1-adfasdf
In short that is called “endpoint” i think.
So i need to create endpoints for each card.
So with that, card will only load its own page and not whole page.

To do this i need a plugin and i need help to build that.
I hope someone would help.
Thanks for reading.

2

Some questions that need answering:

  1. How are you currently implementing this?
  • Can you share your Grav-installation’s code as a Minimum Viable Product in a GitHub repository that we can view?
  1. By “reload card 1”, how are you doing this?
  • Is there a button you click to that should renew its content?
  1. Is this specific to a theme or something you want to offer to other themes through a plugin?

In terms of what you need, it’s not necessarily a plugin - as a theme has the same access to Grav’s Core. But you need to decide whether this function is functionality provided by a theme, or by a plugin with a reusable template.

As for the functionality itself, it can generally be described liked this: Interacting – such as clicking – on a card performs an action that retrieves the content of a random Page and replaces the card’s content with the new one.

This can facilitated by at least two approaches: AJAX to perform the call to an endpoint to get the content, or PJAX to re-render the whole Page but allowing only one card to be randomized. Per your description, the former is simpler to implement. The latter would yield permanent, linkable interfaces.

As you write, an endpoint is a fair characterization of what your cards actually are: Page(s) in Grav, rendered as cards in a specific interface. The benefit of this is that these Page(s) are easily enumerated, and can maintain the normal structure that Grav uses.

3

  1. I don’t know how to use Github much. I also guess we may not need this because i don’t need to use anything that we can install to Grav like plugins or themes. i can simply copy my themes and pages directories and paste them to a newly created Grav folder to run my website.

  2. I found this way to do it via javascript:
    async function soruturet() {
    var krt = document.getElementsByClassName(“kartlar”);

    var rsponse = await fetch(“http://127.0.0.1:8000/?return-as-json”);
    var bdy = await rsponse.text();

    document.querySelector(“.kartlar”).innerHTML = bdy;
    }

With clicking button inside card, this code loads page in card. Since i hardly could understood it when i build it, now months passed and i dont remember much about how it works, sorry about that…

  1. I want to have this plugin for this webpage only since this will be my first webpage. But why not using it to others too if i have it ? If you mean we can do this without plugin, i am open to other options too.

"but allowing only one card to be randomized. "
I hope i didnt explain myself wrong. I want that function for each of cards at pages.
I have currently 21 pages with many cards like this. i want that function for all of cards i have at those pages.

4

@Gin, Please do not cross-post identical questions without letting both forums know (here and on Discord) it is a cross-post. In the end, people on one end are wasting their time…

5

I first posted this to discord. Someone told me there i should post this to here. That s why … I am new here btw and this is my first post.

6

I have been looking for PJAX since yesterday, finally figured out what is it thanks to this video:

This sure looks like what i need but there is one big gap. My cards doesnt have “endpoint”.
I use one file named “kart.html.twig” and add it to pages multiple times. That s how those cards created.
They have different content in them, like sentences and numbers. I differ them with their Class number like class name is “inci” and first card is inci[0], 2. card is inci[1], 3. card is inci[2] … 15. card is inci[14].
At pages file, which is for example mat.md, i edit divs of cards. i name cards divs like A1, A2, A3 … A9 and edit them.

inci[0]
{% set A1 = "adsfdasf" %}
{% set A2 = " random number 2" %}
{% set A2 = " random name asdfdsaf" %}

inci[1]
{% set A1 = "adsfdas132f" %}
{% set A2 = " random number 5" %}
{% set A2 = " random name 234234" %}
.
.
.
etc...

That s how i create pages with cards.
BTW cards actually much more complex, i just tried to explain them as short as i can here.

So in short i first need to give those cards different endpoints i guess. And i dont know how to do.