Building Dynamic Modals

The mx-build-modal attribute in Trongate MX allows you to dynamically create and populate modal dialogs with content fetched via AJAX. This feature enables the creation of interactive, on-demand modal experiences without the need for pre-defined modal structures in your HTML.

Syntax

<element mx-build-modal="modalOptions">

The modalOptions can be a string (modal ID) or a JSON object with detailed configuration options.

Basic Usage

Here's a simple example of using mx-build-modal with a string:

<button mx-get="api/get_user_info" mx-build-modal="user-info-modal">
    View User Info
</button>

In this example:

• Clicking the button triggers the creation of a modal with ID "user-info-modal".
• The modal uses default settings for width and does not include a close button.
• Content is fetched from the specified endpoint and inserted into the modal body.

Advanced Usage

For more control over the modal, you can use a JSON object to specify options:

<button mx-get="title_boss/attempt_add_new_title" 
        mx-build-modal='{
            "id": "add-element-modal",
            "width": "460px",
            "showCloseButton": "true"
        }'>
    <i class="fa fa-plus-circle"></i> Attempt Add New Title
</button>

In this advanced example:

• Clicking the button creates a modal with ID "add-element-modal".
• The modal has a custom width of 460 pixels.
• A close button is included for user convenience.
• Content is fetched from the "title_boss/attempt_add_new_title" endpoint.

Modal Options

When using a JSON object, you can configure the modal with the following options:

• id (required): The ID for the modal element, used for unique identification in the DOM.
• width (optional): Modal width in pixels or other CSS units.
• showCloseButton (optional): Set to "true" to display a close button; omit or set to "false" to hide it.
• modalHeading (optional): HTML content for the modal heading.

Additional Features and Related Attributes

Enhance your dynamic modals with additional attributes:

• mx-close-on-success: Automatically close the modal on successful AJAX requests.
• mx-close-on-error: Automatically close the modal on failed AJAX requests.
• mx-animate-success: Trigger a success animation on successful AJAX requests.
• mx-animate-error: Trigger an error animation on failed AJAX requests.

Example combining multiple attributes:

<button mx-get="title_boss/attempt_add_new_title" 
        mx-build-modal='{
            "id": "add-element-modal",
            "width": "460px",
            "showCloseButton": "true"
        }'
        mx-close-on-success="true"
        mx-animate-success="true">
    <i class="fa fa-plus-circle"></i> Attempt Add New Title
</button>

Additional Notes

• The modal's appearance is controlled by your application's CSS. Customize as needed.
• The content fetched by the AJAX request will be inserted into the modal body.
• You can use mx-target in combination with mx-build-modal to specify where the fetched content should be placed within the modal.
• For handling successful or failed requests, consider using mx-on-success or mx-on-error attributes.

By utilizing the mx-build-modal attribute along with other Trongate MX features, you can create dynamic and engaging modal experiences with minimal coding effort.