JavaScript Framework fairy support js
Receive the value from the server in order to pass component

Receive the value from the server in order to pass component. Part1.

We passed json that can be used as variable named v in view.html until now, but we can use json that received from the server.
Let's change src/js/env/envValue.local.json.

src/js/env/envValue.local.json
{
    "apiRoot" : "http://localhost:8080"
}

Let's change src/js/modules/index.js, src/page/index.html.

src/js/modules/index.js
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resJsonSingleComponent(this.obj, 'sample', $f.envValue('apiRoot') + '/tpl.php', {'sample_key': 'sample_value'})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    success(nodeList) {
        console.log("success");
    }

    error(exception) {
        alert("error");
        console.error(exception);
    }

}
src/page/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

Let's create tpl.php and place it on a web server with CORS settings.
Please prepare your own web server with CORS settings.
Here, as an example, use the header method in PHP to set CORS. Suppose PHP server is http://localhost:8080.

tpl.php
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");

$rawRequest = file_get_contents("php://input");
$jsonRequest = json_decode($rawRequest, true);

$responseJson = array(
    'key1' => '<input type="text">',
    'key2' => array(
        'val1' => 2
    ),
    'key3' => array(
        "key1" => "str1",
        "key2" => "str2",
        "key3" => "str3",
        "key4" => "str4",
        "key5" => "str5"
    ),
    'request_value' => $jsonRequest['sample_key']
);

echo json_encode($responseJson);

Example, We have shown a server program that return json using PHP. Suppose this is located directly under the document root.


Let's change src/js/components/sample/controller.js, src/js/components/sample/view.html.

src/js/components/sample/controller.js
export class Sample {

    constructor(data) {
    }

    init(data) {
        console.log("init");
        console.log(data);
    }

}
src/js/components/sample/view.html
<div data-text='v.key1'></div>

<div data-if='v.key2.val1 === 1'>
    v.key2.val1 === 1
</div>
<div data-elseif='v.key2.val1 === 2'>
    v.key2.val1 === 2
</div>
<div data-else=''>
    else
</div>

<div data-foreach='v.key3' data-foreach-key='arrKey' data-foreach-value='arrVal'>
    <span data-if='l.arrVal === "str2"' data-continue='1' data-tag='hidden'></span>
    <span data-if='l.arrVal === "str4"' data-break='1' data-tag='hidden'></span>
    <span data-text='l.arrKey'></span>
    <span>:</span>
    <span data-text='l.arrVal'></span>
</div>

<div data-text='v.request_value'></div>

For a single component, use the resJsonSingleComponent method. For unique components, use resJsonUniqueComponent.
Pass the component name as the second argument.
Pass the URL that return json as the third argument.
Pass the request parameter to send to the URL that returns json in the 4th argument.
If you want to set withCredentials to true (if you want to send cookies), give true to the 5th argument.
resJsonSingleComponent and resJsonUniqueComponent will POST the data given in the 4th argument to the URL given in the 3rd argument. Pass the json of that response to the component.
If you use appendResJsonSingleComponent and appendResJsonUniqueComponent instead of resJsonSingleComponent and resJsonUniqueComponent, the body part will be added to the body part instead of replacing it.
If you set beforeResJsonSingleComponent and beforeResJsonUniqueComponent instead of resJsonSingleComponent and resJsonUniqueComponent, the body part will be added just before the first argument instead of replacing.
If you set afterResJsonSingleComponent and afterResJsonUniqueComponent instead of resJsonSingleComponent and resJsonUniqueComponent, the body part will be added immediately after the first argument instead of replacing.


Receive the value from the server in order to pass component. Part2.

We sent the json to the server previously, but you can also send the form.
Let's change index.js, index.html, tpl.php.

index.js
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resJsonSingleComponentByForm(this.obj, 'sample', $f.envValue('apiRoot') + '/tpl.php', this.sampleForm)
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    success(nodeList) {
        console.log("success");
    }

    error(exception) {
        alert("error");
        console.error(exception);
    }

}
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
    <div>
        <form data-obj="sampleForm">
            <input name="sample_key" type="text" value="sample_value">
        </form>
    </div>
</body>
</html>
tpl.php
<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");

$responseJson = array(
    'key1' => '<input type="text">',
    'key2' => array(
        'val1' => 2
    ),
    'key3' => array(
        "key1" => "str1",
        "key2" => "str2",
        "key3" => "str3",
        "key4" => "str4",
        "key5" => "str5"
    ),
    'request_value' => $_REQUEST['sample_key']
);

echo json_encode($responseJson);

Added form tag to index.html and added data-obj="sampleForm".
In index.js, we call resJsonSingleComponentByForm for a single component and resJsonUniqueComponentByForm for a unique component.
Pass a form object to send to the URL that returns json as the fourth argument.
If you want to set withCredentials to true (if you want to send cookies), give true to the 5th argument.
resJsonSingleComponentByForm and resJsonUniqueComponentByForm will POST the form given in the 4th argument to the URL given in the 3rd argument. Pass the json of that response to the component.
If you use appendResJsonSingleComponentByForm and appendResJsonUniqueComponentByForm instead of resJsonSingleComponentByForm and resJsonUniqueComponentByForm, the body part will be added to the body part instead of replacing it.
If you set beforeResJsonSingleComponentByForm and beforeResJsonUniqueComponentByForm instead of resJsonSingleComponentByForm and resJsonUniqueComponentByForm, the body part will be added just before the first argument instead of replacing.
If you set afterResJsonSingleComponentByForm and afterResJsonUniqueComponentByForm instead of resJsonSingleComponentByForm and resJsonUniqueComponentByForm, the body part will be added immediately after the first argument instead of replacing.


Next page Receive the view of the component from the server

table of contents