Functions

Special functions that can be called to perform a specific task.

pphpFetch Function

The pphpFetch function is an asynchronous utility for making HTTP requests. It automatically adds the header X-Requested-With: XMLHttpRequest to distinguish these requests as XMLHttpRequest calls, accept a URL and optional options, and return the response as text.

async function pphpFetch(url: string, options?: RequestInit) {
const data = await fetch(url, {
    ...options,
    headers: {
        ...options?.headers,
        "X-Requested-With": "XMLHttpRequest",
    },
});
return await data.text();
}

Example Usage

// Example usage of pphpFetch
const fetchData = async () => {
    // Sending a GET request to retrieve data from '/api/data'
    const response = await pphpFetch('/api/data', {
        method: 'GET',
    });
    // Logging the response text to the console
    console.log(response);
};
fetchData();

pphpFetchFunction

The pphpFetchFunction sends a request to the server, specifying a callback function and additional data. It utilizes the pphpFetch function internally to perform the HTTP request. By default, pphpFetchFunction uses the current page URL (window.location.href) and sends the data as a JSON string in the request body.

async function pphpFetchFunction(functionName: string, data?: any): Promise<any> {}

Example Usage

// Example usage of pphpFetchFunction
const callFunction = async () => {
    // Sending a request to call the 'exampleCallback' function on the server
    // with additional data { key: 'value' }
    const result = await pphpFetchFunction('exampleCallback', { key: 'value' });
    // Logging the result returned by the server
    console.log(result);
};
callFunction();

pphpSync Function

The pphpSync function synchronizes elements marked with pp-sync attributes. It retrieves the updated content from the server and applies it to the corresponding elements in the DOM. This function is particularly useful for keeping the client-side UI synchronized with server-side changes.

There are three conditions to be aware of when using this function:

• By default, the pp-sync="true" attribute updates all elements when the pphpSync function is called without any arguments.
• To update a specific element, such as one with the ID users-table, use the pp-sync="users-table" attribute and call the pphpSync function with the argument 'users-table'.
• To update multiple specific elements, such as those with the IDs users-table and notifications, use the pp-sync attribute for each element and call the pphpSync function with the arguments 'users-table' and 'notifications'.

async function pphpSync(...prefixes: string[]) {}

Example Usage

<?php

use Lib\StateManager;

$userName = StateManager::getState('userName', 'Guest');

function testSync()
{
    StateManager::setState('userName', 'Admin');
    return [
        'success' => 'Hello, World!'
    ];
}

?>

<button onclick="testSync" pp-after-request="testSyncResponse">Click Me!</button>

<p pp-sync="true">Hello, <?= $userName ?></p>
<p pp-sync="userName"><?= $userName ?></p>
<p pp-sync="userName2"><?= $userName ?></p>

<script>
    async function testSyncResponse(response) {
        console.log(response);
        // await pphpSync();
        await pphpSync('userName');
        // await pphpSync('userName', 'userName2');
    }
</script>

Synchronizing elements with the prefixes 'userName' and 'userName2' ensures that the corresponding sections of the UI remain up-to-date with changes made on the server.

Note: The pphpSync attribute re-renders script tags within the content being replaced. However, if you are using MainLayout and injecting your script tags, they will not be re-rendered. The primary purpose of pphpSync is to update the content of the specified elements or HTML. Any script tags within the updated content will be re-rendered and executed.

pphpFetchAndUpdateBodyContent

The pphpFetchAndUpdateBodyContent function fetches the content of the specified URL and updates the body of the current page with the retrieved content. This function is useful for loading new content without refreshing the entire page.

async function pphpFetchAndUpdateBodyContent() {}

Example Usage

<button onclick="pphpFetchAndUpdateBodyContent()">Load New Page</button>

Note: The pphpFetchAndUpdateBodyContent function fetches the content of the current page URL by default and replaces the body content with the new content. This means that any script tags within the body content will be re-rendered and executed. Additionally, script tags injected using the MainLayout's addFooterScript method will also be re-rendered and executed. In simple terms, this function updates the body content with the fetched content.