Trongate Website Homepage

Attaching Dom Values To Requests

The mx-dom-vals attribute in Trongate MX enables you to dynamically attach values from the DOM to your HTTP requests. This powerful feature is especially useful for transmitting information about specific elements on your page, such as the text from a headline or the value of an input field, directly to an API endpoint.

Syntax

<element mx-dom-vals='{
    "paramName": {
        "selector": "CSS_Selector",
        "property": "Element_Property"
    }
}'></element>

The mx-dom-vals attribute should contain a JSON object, where each key represents the name of the parameter to be posted, and the value is another JSON object specifying:

Usage

To use the mx-dom-vals attribute:

  1. Add the attribute to an element that triggers an AJAX request (e.g., a button with mx-post, mx-put, or mx-patch).
  2. Specify the additional parameters in a JSON object format, including the CSS selector and the desired property of the element.

Example 1: Posting the Outer HTML of an H1 Element

<button mx-post="api/submit" 
        mx-dom-vals='{
            "theHeadline": {
                "selector": "h1",
                "property": "outerHTML"
            }
        }'>
    Submit Headline
</button>

In this example:

Example 2: Posting the Inner Text of a Paragraph Element

<button mx-post="api/submit" 
        mx-dom-vals='{
            "paragraphText": {
                "selector": "p.intro",
                "property": "innerText"
            }
        }'>
    Submit Paragraph Text
</button>

In this example:

Example 3: Posting the Value of an Input Element

<button mx-post="api/submit" 
        mx-dom-vals='{
            "inputValue": {
                "selector": "input[name='username']",
                "property": "value"
            }
        }'>
    Submit Input Value
</button>

In this example:

Best Practices

  1. Security: Always follow best practices for securing your API endpoints when using mx-dom-vals. For more information, see Securing Endpoints With Trongate MX.
  2. Consistency: Ensure the keys in mx-dom-vals match the expected field names on the server side.
  3. Validation: Validate the additional data on the server side to ensure it meets your application's requirements.

Additional Information

  • The mx-dom-vals attribute should contain a valid JSON object. Each key-value pair represents a parameter name and its corresponding selector and property.
  • Ensure that the JSON string is properly formatted to avoid parsing errors.
  • The values specified in mx-dom-vals will be added to the HTTP request along with any existing form fields.
  • The mx-dom-vals attribute works with POST, PUT, and PATCH requests. It does not apply to GET requests.

Notes

By utilizing the mx-dom-vals attribute, you can enhance the flexibility and control of your HTTP requests in Trongate MX, making it easier to manage additional form values and improve the robustness of your web applications.