JavaScript Framework fairy support js
Receive the view of the component from the server

Receive the view of the component from the server. Part1.

Get the view of a component from an external server.
Let's change index.js, index.html

index.js
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resHtmlSingleComponent(this.obj,
                                  'sample',
                                  $f.envValue('apiRoot') + '/tpl2.php',
                                  {'sample_key': 'sample_value'},
                                  {'key1': '<input type="text">', 'key2': {'val1': 2}, 'key3': {"key1": "str1", "key2": "str2", "key3": "str3", "key4": "str4", "key5": "str5"}})
        .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>
</body>
</html>

Let's create tpl2.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.

tpl2.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);
?>
<div>--requestData--</div>
<div><?php echo htmlspecialchars($jsonRequest['sample_key'], ENT_QUOTES)?></div>
<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

Let's change src/js/components/sample/controller.js.

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

    constructor(data) {
    }

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

    sample_input(event) {
        this.obj.textContent = event.target.value;
    }

}

For a single component, use the resHtmlSingleComponent method. For unique components, use resHtmlUniqueComponent.
Pass the component name as the second argument.
Pass the URL that return view as the third argument.
In the 4th argument, pass the request parameter to be sent to the URL that return view.
Pass the object used by the variable name v in the view as the fifth argument.
If you want to set withCredentials to true (if you want to send a cookie), give true to the 6th argument.
resHtmlSingleComponent and resHtmlUniqueComponent will POST the data passed in the 4th argument to the URL given in the 3rd argument. Treat the response as view.html.
If you use appendResHtmlSingleComponent and appendResHtmlUniqueComponent instead of resHtmlSingleComponent and resHtmlUniqueComponent, the body part will be added to the body part instead of replacing it.
If you set beforeResHtmlSingleComponent and beforeResHtmlUniqueComponent instead of resHtmlSingleComponent and resHtmlUniqueComponent, the body part will be added just before the first argument instead of replacing.
If afterResHtmlSingleComponent and afterResHtmlUniqueComponent are used instead of resHtmlSingleComponent and resHtmlUniqueComponent, the body part will be added immediately after the first argument instead of replacing.


Receive the view of the component from the server. Part2.

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

index.js
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resHtmlSingleComponentByForm(this.obj,
                                  'sample',
                                  $f.envValue('apiRoot') + '/tpl2.php',
                                  this.sampleForm,
                                  {'key1': '<input type="text">', 'key2': {'val1': 2}, 'key3': {"key1": "str1", "key2": "str2", "key3": "str3", "key4": "str4", "key5": "str5"}})
        .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>
tpl2.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");

?>
<div>--requestData--</div>
<div><?php echo $_REQUEST['sample_key']?></div>
<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

For a single component, use the resHtmlSingleComponentByForm method. For unique components, use resHtmlUniqueComponentByForm.
Pass the component name as the second argument.
Pass the URL that return view as the third argument.
Pass the form object to be sent to the URL that return view as the fourth argument.
Pass the object used by the variable name v in the view as the fifth argument.
If you want to set withCredentials to true (if you want to send a cookie), give true to the 6th argument.
resHtmlSingleComponentByForm and resHtmlUniqueComponentByForm will POST the form passed in the 4th argument to the URL passed in the 3rd argument. Treat the response as view.html.
If you use appendResHtmlSingleComponentByForm and appendResHtmlUniqueComponentByForm instead of resHtmlSingleComponentByForm and resHtmlUniqueComponentByForm, the body part will be added to the body part instead of replacing it.
If you set beforeResHtmlSingleComponentByForm and beforeResHtmlUniqueComponentByForm instead of resHtmlSingleComponentByForm and resHtmlUniqueComponentByForm, the body part will be added just before the first argument instead of replacing.
If afterResHtmlSingleComponentByForm and afterResHtmlUniqueComponentByForm are used instead of resHtmlSingleComponentByForm and resHtmlUniqueComponentByForm, the body part will be added immediately after the first argument instead of replacing.


Next page Ajax

table of contents