Redirect on Success

Trongate MX

Documentation

Introduction

Core HTTP Operations

Swapping Content

Events & Responses

Dynamic Form Handing

UI Enhancements

Data Management

Form Handling

Advanced Features

Trongate MX Security

Reference

Trongate MX Attributes

Help Improve Our Docs

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.

Documentation Home

Trongate MX

Events & Responses

Redirect on Success

In certain situations, you may wish to redirect users to a different URL after receiving a success status code (200-299) from an API endpoint. The mx-redirect-on-success attribute is specifically designed for this purpose.

Usage

To use mx-redirect-on-success, add it to any element that triggers an HTTP request (such as forms or buttons) and set its value to "true". The redirect URL should be returned as plain text in the response body from the server.

The redirect happens immediately upon receiving a successful response from the target API endpoint. Because of this, mx-redirect-on-success should not be combined with animation attributes or other success handlers since they won't have time to execute.

Basic Example:

The code sample below would render a form button that - when clicked - invokes an HTTP post request. If the server responds with an HTTP status code in the 'success' range (for example, 200), the user will be immediately redirected to the URL that is specified in the response body.

Here's an alternative syntax for developers who prefer to work with pure HTML:

The code sample above assumes that a $trongate_token value has been passed into the view file from a controller file.

Server-Side Implementation

For the redirect to work correctly, your API endpoint must:

Return a success status code (200-299).
Return only the redirect URL as plain text in the response body.

Example Controller Code:

Common Use Cases

1. Login Form

2. Multi-Step Process

The following considerations should be taken into account:

The response body must contain only the URL - any additional content will prevent the redirect.
The redirect occurs immediately upon receiving a successful response.
Cannot be used with animation attributes since the redirect is immediate.

URL Handling

The redirect URL can be specified in several ways:

Relative to your site root (e.g., 'dashboard').
Starting with a forward slash (e.g., '/dashboard').
As an absolute URL (e.g., 'https://example.com/dashboard').

Note: For relative URLs to work correctly, your page should include a <base> tag in the head section. For example:

Without a base tag, relative URLs might not resolve to the correct location.

For comprehensive navigation flows, consider using both mx-redirect-on-success and mx-redirect-on-error together to handle both successful and failed scenarios.

Summary

The mx-redirect-on-success attribute is a handy way to redirect users after a successful form submission. However, there are a wide variety of other scenarios where it could be useful.

By simply specifying a URL, you can guide users seamlessly to the next step in their journey - no extra JavaScript required! Whether you're using pure HTML or Trongate's helper functions, this attribute makes building smooth, user-friendly experiences a breeze.