oziLoadData

Version: 4.0.2 — Updated: 2026-05-27

Description

Transport and integration engine of the ozi-ui library. Performs data collection, submission and handling in different execution modes, with support for visual destination, API integration and behavior control.

oziLoadData was born as a plugin, but is becoming the intelligent plumbing between interface, data and backend — a true engine, bridge and transport layer of the Ozi Library.

Examples

[1] Form with validation

Automatic validation — the button stays inactive until all required fields are filled.

<button type="button"
    data-zld-url="/api/example/response"
    data-zld-destiny-id="response1"
    data-zld-catch-group-id="actionForm1"
    class="btn btn-primary">
    Submit
</button>

[2] Two simultaneous forms

Collects data from two different groups in a single submission.

<button type="button"
    data-zld-url="/api/example/response"
    data-zld-destiny-id="response2"
    data-zld-catch-group-id="demoFormA, demoFormB"
    class="btn btn-primary">
    Submit
</button>

[3] Collect by item name

Collects only fields with specific names — ignores the rest.

<button type="button"
    data-zld-url="/api/example/response"
    data-zld-destiny-id="response3"
    data-zld-catch-group-id="demoFormC"
    data-zld-catch-item-name="car,bike,plane:jfk airport"
    class="btn btn-primary">
    Submit
</button>

plane:jfk airport — sends the field with a fixed value defined in the attribute.

[4] Via JavaScript — current

Call via oziLoadData({...}) directly in JavaScript.

oziLoadData({
    zldUrl:           '/api/example/response',
    zldDestinyId:     'response4',
    zldCatchGroupId:  ['demoFormJS'],
    zldCatchItemName: ['car','bike']
});

[5] Via JavaScript — legacy

Compatibility with the previous version using the ld prefix instead of zld.

// ld prefix — compatibility with previous version
oziLoadData({
    ldUrl:           '/api/example/response',
    ldDestinyId:     'response5',
    ldCatchGroupId:  'demoFormLegacy',
    ldCatchItemName: 'inputLegacy:star-trek'
});

[6] Response return

Example of the PHP response the backend returns to the frontend.

Backend PHP — response example:

<?php header('Content-Type: text/html; charset=utf-8'); ?>

<h6 class="fw-bold">Received content</h6>
<div class="m-3">
    <?php
    $data = $_POST ?: $_GET;
    foreach ($data as $key => $value) {
        echo "<div>
            <span class='text-primary'>{$key}:</span>
            <span class='text-muted'>{$value}</span>
        </div>";
    }
    ?>
</div>
<hr>
<div class="text-end text-muted" style="font-size:12px">
    Date/Time: <?php echo date('Y-m-d H:i:s'); ?>
</div>

Structured JSON return:

{
    "perm":   1,
    "isJson": false,
    "ok":     true,
    "status": 200,
    "data":   null,
    "html":   "<h6>Received content</h6>...",
    "error":  null
}

Features

• Dynamic submission — supports fetch, window and page modes
• Flexible collection — collects data by group, individual item or JSON
• Visual response — sends return to a specific destination in the DOM
• Two simultaneous forms — catch-group-id accepts multiple IDs
• Collect by name — catch-item-name selects specific fields
• Fixed value — field:value sends value defined in the attribute
• Legacy compatibility — accepts ld prefix from previous version
• API integration — facilitates data-oriented calls
• Form clearing — clears fields after submission when configured
• Debug support — displays detailed logs via data-zld-log

HTML Attributes

[1] Submission

[2] Data Collection

[3] Response / Destination

[4] Behavior / UX

[5] Debug

[6] Compatibility

Adapted for IIFE → Async/Await, avoids conflicts, immediate execution, private scope and base prepared for SPA. Accepts legacy ld prefix (e.g. ldUrl, ldDestinyId) for compatibility with previous versions.