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.
Targeting Elements
The mx-target attribute in Trongate MX is a powerful feature that allows you to specify which element in the DOM should be updated with the server response. This enables fine-grained control over where and how content is dynamically inserted or replaced, enhancing the interactivity and responsiveness of your web application without writing JavaScript.
If no mx-target attribute is specified, Trongate MX will automatically update the triggering element itself with the server response.
Basic Element Targeting:
With the code below, the response from the server will be inserted into the <div> element with the id "result". You can use any valid CSS selector to target elements.
Here's how to achieve this using Trongate's form_button() form helper:
Alternatively, the same functionality can be built with pure HTML as shown below.
Advanced Element Targeting
The mx-target attribute supports several advanced targeting options to provide more flexibility:
| Option | Description | Example Syntax |
|---|---|---|
| CSS Selector | Any valid CSS selector that targets a specific element. | mx-target="#myDiv" |
| closest <selector> | Finds the closest ancestor matching the selector. | mx-target="closest li" |
| find <selector> | Finds the first descendant matching the selector. | mx-target="find .target" |
| none | Makes the request without updating any content. | mx-target="none" |
More Examples:
Finding the First Descendant (find <selector>):
In this example, when the form is submitted, the server response will be inserted into the .status-message div that exists within the form. The find selector locates the first descendant element matching the given selector, making it perfect for updating specific parts within a larger component.
Using Trongate's form helper functions:
Here's an alternative syntax, written in pure HTML:
Finding the Closest Ancestor (closest <selector>):
The closest selector finds and updates the nearest parent element that matches the given selector. This is particularly useful when you need to update a containing element from a control that's nested within it.
Here's an example that uses Trongate's form_button() form helper:
And here's how the same result can be achieved with pure HTML:
Using Tag Selectors:
You can target any HTML element using its tag name as a selector (e.g., 'body', 'main', 'footer'). The server response will replace the entire contents of the first matching element on the page.
Using Trongate's form_button() form helper:
If you'd rather work directly with HTML, here's the code:
No Content Replacement (none):
When mx-target="none" is specified, the server request will be made but no content will be updated on the page. This is useful when you need to trigger a server action without needing to update the UI, such as logging events or performing background tasks.
Here's an example, using Trongate's form_button() form helper:
Here's how the same result can be achieved with pure HTML: