wf-action-modal.js extends the modal system for server-driven AJAX workflows. Add data-wf-action to any button – no per-page JS setup needed. The module registers a single delegated click listener on the document and handles the full lifecycle: fetch form fragment → render modal → POST → toast feedback → DOM mutation.
On click the module GETs an HTML fragment from data-wf-url and renders it inside a modal. On confirmation, it POSTs the same URL, reads the JSON response, shows a toast, then mutates the DOM using the data-wf-complete strategy.
<button type="button"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"copy","id":1}'
data-wf-title="Copy page"
data-wf-label="Copy"
data-wf-parent="#pages-list"
data-wf-complete="append"
class="wf-btn wf-btn-sm wf-btn-outlined">
<i class="icon copy" aria-hidden="true"></i> Copy
</button>GETs a confirmation fragment (warning message), then on confirmation POSTs the action and removes the target element from the DOM via data-wf-complete="remove" .
This message will be removed from the DOM on successful delete.
<button class="wf-btn wf-btn-sm wf-btn-alert"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"delete","id":99}'
data-wf-title="Are you sure?"
data-wf-label="Delete"
data-wf-parent="#delete-target"
data-wf-complete="remove">
Delete
</button>Loads a form pre-filled with current values. On submit the server returns updated HTML and data-wf-complete="replace" swaps the source row in place.
<button type="button"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"edit","id":1}'
data-wf-title="Edit page"
data-wf-label="Save changes"
data-wf-parent="#item-edit-1"
data-wf-complete="replace"
class="wf-btn ...">
Edit
</button>Loads a checkbox form. On submit shows a toast with the saved permissions – no DOM element is mutated since the trigger omits data-wf-parent and data-wf-complete .
<button type="button"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"permissions","id":5}'
data-wf-title="Set permissions"
data-wf-label="Save permissions"
class="wf-btn ...">
Set permissions
</button>Opens a compose form. Submitting with empty fields returns validation errors rendered as a structured message list inside the modal. Fill in both fields to see a success toast.
<button type="button"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"email","id":7}'
data-wf-title="Email user"
data-wf-label="Send email"
class="wf-btn ...">
Email user
</button>Use data-wf-no-footer for read-only detail panels that need no action buttons. The modal renders with only the close button in the header.
<button type="button"
data-wf-action
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"info","id":42}'
data-wf-title="Record details"
data-wf-no-footer
class="wf-btn ...">
View details
</button>data-wf-confirm skips the GET entirely and renders a client-side confirmation body immediately. Use it for trash, restore, archive, and permanent delete. Add data-wf-confirm-text to override the default message for destructive actions.
<!-- Trash (default confirm text) -->
<button type="button" data-wf-action data-wf-confirm
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"trash","id":5}'
data-wf-title="Move to trash?"
data-wf-label="Move to trash"
data-wf-parent="#item-5"
data-wf-complete="remove"
class="wf-btn ...">
Trash
</button>
<!-- Delete (custom warning text) -->
<button type="button" data-wf-action data-wf-confirm
data-wf-confirm-text="This will permanently erase the record. There is no undo."
data-wf-url="/api/api-action-modal.php"
data-wf-params='{"action":"delete","id":5}'
data-wf-title="Delete permanently?"
data-wf-label="Delete"
data-wf-parent="#item-5"
data-wf-complete="remove"
class="wf-btn ...">
Delete
</button>| Attribute | Default | Description |
|---|---|---|
| data-wf-action | - | Required. Marks the element as an action-modal trigger. No value needed. |
| data-wf-url="/path" | - | Endpoint for GET (load fragment) and POST (submit). Same URL for both. |
| data-wf-params='{"k":"v"}' | - | JSON object merged into the GET query string and the POST body. |
| data-wf-title="Title" | data-wf-label | Modal header title. Falls back to data-wf-label then "Action". |
| data-wf-label="Save" | "OK" | OK / submit button label. |
| data-wf-cancel="Cancel" | "Cancel" | Cancel button label. |
| data-wf-modal-size="sm" | "sm" | Panel width preset: sm , md , lg , xl , full . |
| data-wf-parent="#selector" | - | CSS selector for the DOM element to mutate after a successful POST. |
| data-wf-complete="append" | - | DOM mutation strategy: append , prepend , replace , innerHTML , remove , reload , highlight . |
| data-wf-confirm | - | Skip GET; render a client-side confirmation body immediately. No value needed. |
| data-wf-confirm-text="..." | - | Custom body text for the confirmation dialog. Overrides the default message. |
| data-wf-no-footer | - | Suppress the OK/Cancel footer. Use for read-only info panels. |
| data-wf-children='{"#el":{"count":"html"}}' | - | Extra DOM updates on success - object map of selector → property/method. |
The server must respond with JSON. All keys are optional except type .
{
"type": "positive | negative | alert | info",
"title": "Success",
"message": "Record saved.",
"fields": ["Field name that failed validation"],
"html": "<li id=\"item_42\">...</li>",
"complete": "append",
"redirect": "/new/path",
"close": false
}| Key | Required | Description |
|---|---|---|
| type | Yes | Toast severity: positive , negative , alert , info . |
| title / message | No | Text shown in the toast notification. |
| fields | No | Array of field names rendered as a validation error list inside the modal. |
| html | No | HTML fragment for DOM mutation. Used with complete . |
| complete | No | Overrides data-wf-complete from the trigger. |
| redirect | No | URL to navigate to after the toast is shown. |
| close | No | Set false to keep the modal open on error (default: close on success). |