Layout Ajax actions

In Advanced Views, every Layout is a smart entity, natively supporting the WordPress Ajax.

It enables you to create components that can send data and/or update themselves in the background without refreshing the page.

Server side:

To use this feature, we override the get_ajax_response() method inside the Layout Controller instance. The return value should be an array, which will be passed as JSON to the client.

Within the callback, you can use any WordPress functions. Furthermore, you can employ PHP-DI to get direct access to your theme classes.

Client side:

On the client side, as usual, we send requests to the admin-ajax.php file.

1. Rest Api vs. Ajax

Not sure about the difference between WordPress Ajax and REST API?

In most cases, we recommend using the REST API. It is much faster compared to the traditional admin-ajax.php requests, as it skips loading unnecessary WordPress parts - while still making all necessary WordPress functions available - as it is called during the WordPress init action.

If you need to work with authorized users, Ajax may be the simpler option, as it respects the auth cookie within requests; therefore, it doesn't require Request Authentication parts.

2. Layout Ajax example

JavaScript code

Incorporate the following function into your Layout's JavaScript code:

async function makeAjax() {
    let response = await fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            'action': 'advanced_views',
            // todo put your Layout ID 
            '_layout-id': '6630e2da1953e', // you can learn ID from the shortcode
            // todo your args here
            'myArg': 'myvalue',
        }).toString(),
    });

    let responseText = await response.text();
    let json = {};

    try {
        json = JSON.parse(responseText);
    } catch (e) {
        console.log("Error parsing JSON", responseText);
        return;
    }

    console.log('ajax complete', json);
}

Layout Controller code

Incorporate the following function into your Layout Controller:

<?php

declare( strict_types=1 );

use Org\Wplake\Advanced_Views\Bridge\Controllers\Layout\Layout_Controller_Base;

return new class extends Layout_Controller_Base {
	public function get_ajax_response(): array {
		$myArg = sanitize_text_field( $_POST['myArg'] ?? '' );

		// todo your logic here
		// additionally, you can use $this->get_container()
		// to get PHP-DI instance and access to any of your theme classes

		return [
			'my_response' => 'Thank you for the feedback!',
		];
	}
};