Fork me on GitHub

Config File

In this example, the config options of the Jaxon library and its plugins are loaded from a file in Yaml format. The config options are under the jaxon section of the file.

 
The HTML code.


<div class="row">
    <div class="col-md-12" id="hello-text-two">
        &nbsp;
    </div>
    <div class="col-md-4 select">
        <select class="form-select form-control" id="colorselect" name="colorselect" <?= attr()
            ->on('change', rq('HelloWorld')->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')->sayHello(1)) ?>>CLICK ME</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->sayHello(0)) ?>>Click Me</button>
        <button type="button" class="btn btn-primary" <?= attr()
            ->click(rq('HelloWorld')->showDialog()) ?>>Show Dialog</button>
    </div>
</div>

The Jaxon library config

The Jaxon setup code.


<?php

class HelloWorld
{
    public function sayHello(bool $isCaps, bool $bNotify = true)
    {
        $text = $isCaps ? 'HELLO WORLD!' : 'Hello World!';
        $xResponse = jaxon()->newResponse();
        $xResponse->assign('hello-text-two', 'innerHTML', $text);
        if($bNotify)
            $xResponse->dialog()->success("hello-text-two text is now $text");
    }

    public function setColor(string $sColor, bool $bNotify = true)
    {
        $xResponse = jaxon()->newResponse();
        $xResponse->assign('hello-text-two', 'style.color', $sColor);
        if($bNotify)
            $xResponse->dialog()->success("hello-text-two color is now $sColor");
    }

    public function showDialog()
    {
        $xResponse = jaxon()->newResponse();
        $buttons = [['title' => 'Close', 'class' => 'btn', 'click' => 'close']];
        $options = ['width' => 500];
        $xResponse->dialog()->show("Modal Dialog", "This modal dialog is powered by PgwJs!!", $buttons, $options);
    }
}

// Register object
$jaxon = jaxon();

$jaxon->app()->setup(configFile('config.yaml'));
The Javascript code is generated from this PHP template.


jaxon.dom.ready(() => {
    // Call the HelloWorld class to populate the 2nd div
    <?= rq('HelloWorld')->sayHello(0, false) ?>;
    // call the HelloWorld->setColor() method on load
    <?= rq('HelloWorld')->setColor(Jaxon\select('colorselect'), false) ?>;
});