☰
Trongate MX Docs
Introduction
Core HTTP Operations
Swapping Content
Events & Responses
Dynamic Form Handing
UI Enhancements
Data Management
Form Handling
Advanced Features
Trongate MX Security
Reference

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 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 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 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 helper:

Here's how the same result can be achieved with pure HTML: