Asynchrone Aktionen & Toast-Benachrichtigungen

Den Handler eines Buttons asynchron auslösen, mit Text-Zuständen für Laden/Erfolg, und eine Toast-Benachrichtigung aus einem Hook oder einer Button-Funktion heraus einreihen.

Lade-/Erfolgstext an einem Button

Die Optionen before/loading/after eines ->button()-Aufrufs steuern den Text des Buttons durch jede Phase eines asynchronen Klicks - im Ruhezustand, während der Anfrage und kurz bei Erfolg -, mit derselben Spinner-Behandlung, die Speichern/Löschen bereits nutzen (setButtonLoading() in core/xcrud.js):

$xcrud->button('Process', 'orderdetails_process_line', [
    'icon'    => 'fa fa-cogs',
    'confirm' => 'Process this order line?',
    'before'  => 'Process',
    'loading' => 'Processing…',
    'after'   => 'Processed ✓',
]);

Die vollständige Liste der Optionen finden Sie unter Individuelle Zeilen-Buttons.

Einen Toast einreihen

toast($message, $type = 'success') reiht eine Nachricht für die eigene Toast-Popup-UI von xcrud.js ein. Rufen Sie sie aus einem Hook oder Button-Handler heraus auf - nicht aus dem obersten PHP-Code einer Seite, da außerhalb einer Schreibanfrage nichts sie ausliest:

function payments_after_insert(mixed $id, array $row, Xcrud $xcrud): void
{
    $xcrud->toast('Payment recorded.');
}

$type ist ein freier String; xcrud.js erkennt 'success'/'error'/'info'/'warning' für Styling/Icon und fällt bei allem anderen auf 'info' zurück, sodass ein Tippfehler zu einem schlicht eingefärbten Toast führt statt stillschweigend zu verschwinden.

Verwendung auf einer Seite ganz ohne Grid

Asynchrone Ladezustände und Toasts sind nicht an ein eingebundenes $xcrud-Widget gebunden - Xcrud::uiAssets() lädt nur das CSS/JS des aktuellen Themes, und core/xcrud.js stellt window.Xcrud.setButtonLoading()/window.Xcrud.toast() direkt bereit, sodass auch eine Seite ohne Widget genau dieselbe Spinner-/Toast-Behandlung für ihren eigenen einfachen Button nutzen kann:

<body>
    <?php echo Xcrud::uiAssets(); ?>
    <script src="core/xcrud.js"></script>

    <button type="button" id="demo-async-btn">Generate Report</button>

    <script>
        var btn = document.getElementById('demo-async-btn');

        btn.addEventListener('click', function () {
            window.Xcrud.setButtonLoading(btn, true, 'Processing…', 'none');

            fetch('core/demo_async.php', { method: 'POST' })
                .then(function (res) { return res.json(); })
                .then(function (json) {
                    window.Xcrud.setButtonLoading(btn, false, '', 'none');
                    window.Xcrud.toast(json.message || 'Done.', json.success ? 'success' : 'error');
                })
                .catch(function () {
                    window.Xcrud.setButtonLoading(btn, false, '', 'none');
                    window.Xcrud.toast('Network error.', 'error');
                });
        });
    </script>
</body>

Platzieren Sie Xcrud::uiAssets() und das xcrud.js-<script>-Tag im <body>, nicht im <head> - das Shell-Wrapping des Routers extrahiert nur den Inhalt von <body> aus einer Seite, die ihr eigenes vollständiges HTML-Dokument erzeugt, sodass ein reines <head>-Asset-Tag die endgültige Seite nie erreicht.

Referenz

Aufruf	Zweck
`window.Xcrud.setButtonLoading(btn, isLoading, loadingText, ui)`	Schaltet einen Button zwischen Ruhe- und Ladezustand um (deaktiviert, Spinner, Ersatztext) - derselbe Helfer, den Speichern/Löschen/->button()-Klicks bereits intern verwenden.
`window.Xcrud.toast(message, type)`	Zeigt direkt clientseitig ein Toast-Popup an, ohne einen Server-Roundtrip zum Einreihen.
`$xcrud->toast($message, $type = 'success')`	Reiht serverseitig einen Toast ein, aus einem Hook/einer Button-Funktion heraus, ausgeliefert mit der nächsten Antwort.
`Xcrud::uiAssets()`	Gibt die CSS-/JS-Tags des aktuellen Themes aus, ohne ein Widget einzubinden - für eine Seite, die die Helfer von xcrud.js nutzen möchte, aber kein Grid hat.