If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.
Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.
Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.
Swap Operations
The mx-swap attribute determines how the response content is inserted into the target element, as specified by the mx-target attribute. If the mx-swap attribute is not provided, it defaults to innerHTML, which replaces the inner HTML of the target element.
Available Swap Methods:
| Method | Description | Example Syntax |
|---|---|---|
| innerHTML (default) | Replaces the inner HTML of the target element with the response content. | mx-swap="innerHTML" |
| outerHTML | Replaces the entire target element with the response content. | mx-swap="outerHTML" |
| textContent | Replaces the text content of the target element with the response content. | mx-swap="textContent" |
| beforebegin | Inserts the response content before the target element. | mx-swap="beforebegin" |
| afterbegin | Inserts the response content as the first child of the target element. | mx-swap="afterbegin" |
| beforeend | Inserts the response content as the last child of the target element. | mx-swap="beforeend" |
| afterend | Inserts the response content after the target element. | mx-swap="afterend" |
| delete | Removes the target element from the DOM. | mx-swap="delete" |
| value | Sets the value property of form elements (inputs, textareas, selects) with the response content. | mx-swap="value" |
| none | Does not insert any content into the DOM. Useful for out-of-band swaps where no direct DOM update is needed. | mx-swap="none" |
Examples:
Prepend Data:
This code sample below uses the mx-swap="afterbegin" method to insert the response content as the first child of the target element.
PLEASE NOTE: This example uses Trongate's form_button() function. There's no obligation to use Trongate's form helper functions and it's acceptable to work with pure HTML, if you wish.
Here's how you can accomplish the same using pure HTML:
Clicking the button adds a new task to the top of the task list. For example, if the response text from the server is <li>Schedule team meeting</li>, it will become the first item in the list.
Replace Entire Element:
Here, mx-swap="outerHTML" is used to replace the entire target element with the response content.
Using Trongate's form_button() function:
For those who prefer working with pure HTML, the equivalent solution is here:
Insert Before Target:
This example demonstrates how to insert content before the target element using mx-swap="beforebegin".
Using Trongate's form_button() form helper:
Alternatively, the same functionality can be achieved with pure HTML:
Repopulate Form Field:
In the following example, mx-swap="value" is used to update the value of a form textarea element. This approach can be particularly useful for applications such as code beautifiers, date-pickers or any other tool that modifies form input values.
PLEASE NOTE: The code sample below utilises a variety of Trongate's form helper functions; however, their usage is entirely optional:
If you prefer a more HTML-centered approach, you could use the following syntax:
Building web applications with pure HTML forms could potentially expose your application to Cross-Site Request Forgery (CSRF) attacks. For more information, please refer to our documentation pertaining to CSRF Protection.