Jaxon

The global function rq(), called without a parameter, returns a factory which can make Ajax calls to exported functions. rq()->helloWorld(1) calls the exported function helloWorld(bool $isCaps).

<div class="row">
    <div class="col-md-12" id="hello-text">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="colorselect" name="colorselect"
            <?= attr()->on('change', rq()->setColor(Jaxon\select('colorselect'))) ?>>
            <option value="black" selected="selected">Black</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="col-md-8 buttons">
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq()->helloWorld(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq()->helloWorld(0)) ?>>Click Me</button>
    </div>
</div>

                                    

<?php

use Jaxon\Jaxon;

/*
    Function: helloWorld

    Modify the innerHTML of hello-text.
*/
function helloWorld(bool $isCaps)
{
    $text = $isCaps ? 'HELLO WORLD!' : 'Hello World!';
    $xResponse = jaxon()->newResponse();
    $xResponse->assign('hello-text', 'innerHTML', $text);
}

/*
    Function: setColor

    Modify the style.color of hello-text
*/
function setColor(string $sColor)
{
    $xResponse = jaxon()->newResponse();
    $xResponse->assign('hello-text', 'style.color', $sColor);
}

$jaxon = jaxon();

// Js options
$jaxon->setOption('js.lib.uri', '/js');
$jaxon->setOption('js.app.minify', false);
$jaxon->setOption('core.decode_utf8', true);

// Register functions
$jaxon->register(Jaxon::CALLABLE_FUNCTION, 'helloWorld', ['mode' => "'asynchronous'"]);
$jaxon->register(Jaxon::CALLABLE_FUNCTION, 'setColor', ['mode' => "'asynchronous'"]);

                                    

jaxon.dom.ready(() => {
    // call the helloWorld function to populate the div on load
    <?= rq()->helloWorld(0) ?>;
    // call the setColor function on load
    <?= rq()->setColor(Jaxon\select('colorselect')) ?>;
});