Managing UI During Requests

The mx-during-request attribute in Trongate MX provides a way to control the appearance and behavior of the target element while an AJAX request is in progress. This feature can enhance user experience by providing visual feedback during server interactions.

Understanding mx-during-request

When you use mx-during-request, you're specifying how the target element should appear or behave while waiting for a server response. This can be particularly useful for indicating loading states, preventing user interaction, or displaying temporary content.

Usage

The mx-during-request attribute can be applied to the element triggering the request. It affects the target element specified by mx-target.

Basic Example:

<button mx-get="api/data" 
        mx-target="#result" 
        mx-during-request="cloak">Get Data</button>
<div id="result"></div>

In this example, the content of the #result div will be cloaked (hidden) while the request is in progress.

Available Options

The mx-during-request attribute supports the following options:

Detailed Examples:

Cloaking the Target Element:

<button mx-get="api/data" 
        mx-target="#result" 
        mx-during-request="cloak">Fetch Data</button>

<div id="result">This content will be temporarily hidden during the request.</div>

This will hide the #result div while the request is in progress.

Showing a Loading Placeholder:

<div id="loading-placeholder" style="display: none;">Loading...</div>

<button mx-get="api/data" 
        mx-target="#result" 
        mx-during-request="#loading-placeholder">Fetch Data</button>
<div id="result">This content will be replaced by the loading placeholder during the request.</div>

This will replace the content of #result with "Loading..." while the request is in progress.

Additional Notes

Hiding Temporary Placeholders

When using a CSS selector with the mx-during-request attribute, ensure that the referenced element exists in the DOM and is hidden by default to prevent layout shifts.

The code sample below is incorrect. The "Fetching results" message may potentially be visible, regardless of whether an HTTP request is being invoked by Trongate MX.

Incorrect:

<div id="loading">Fetching results...</div>

<button mx-get="api/data" 
        mx-target="#result" 
        mx-during-request="#loading">Submit</button>
<div id="result">Your Results Will Appear Here</div>

NOTE: While it is technically feasible to use CSS to hide the "loading" element, a more robust approach would be to use inline CSS to explicitly set the element's display property to "none." For example:

Correct:

<div id="loading" style="display: none;">Fetching results...</div>

Regarding Swapping of Temporary Placeholders

When using a CSS selector with mx-during-request, it is important to note that only the placeholder's inner HTML will be temporarily inserted into the target element.

The code below illustrates another example of incorrect usage of the mx-during-request attribute.

Incorrect:

<div id="loading" class="blink" style="display: none;">*** PLEASE WAIT ***</div>

This code is incorrect because the temporary placeholder element contains a CSS class named "blink." It appears the developer intended for the placeholder to include blinking text. However, the code will not function as expected since only the inner HTML of the placeholder element will be inserted into the target element's inner HTML.

To resolve this issue, the entire `div` containing the "blink" class should be placed inside the element assigned with the "loading" class. For example:

Correct:

<div id="loading" style="display: none;">
    <div class="blink">*** PLEASE WAIT ***</div>
</div>