Redirect on Error

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 Error

Sometimes, you may wish to redirect users to a different URL when an API endpoint returns an error status code (400-599). The mx-redirect-on-error attribute makes this process straightforward.

Usage

Simply add mx-redirect-on-error 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 your server.

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

Basic Example:

In the example below, clicking a form button invokes an HTTP POST request. If the server responds with an HTTP response code that is in the success range, the element with an id of 'result' will be updated. However, if the server responds with an HTTP response code in the error range, the user will be redirected to the URL that is specified in the response body.

Here's an alternative syntax, for users 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 error redirect to work correctly, your API endpoint must:

Return an error status code (400-599).
Return only the redirect URL as plain text in the response body.

Example Controller Code:

Common Use Cases

1. Login Form

2. Protected Resource Access

A few friendly reminders:

Make sure your response body contains only the URL - any additional content will prevent the redirect from working properly.
The redirect happens straight away when an error response is received.
You can't use this with error animation attributes since the redirect happens immediately.
For handling successful scenarios, consider using mx-redirect-on-success.

URL Handling

You can specify the redirect URL in several ways:

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

Tip: For relative URLs to work properly, make sure your page includes a <base> tag in the head section. For example:

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

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

Summary

The mx-redirect-on-error attribute provides a simple way to handle error scenarios in your web applications. It is especially useful for managing authentication failures, missing resources, or any situation where you need to gracefully redirect users to a different page when things don't go as planned.

Best of all, no extra JavaScript is required - simply return a URL from your API endpoint, and you're good to go! Whether you're building a complex authentication system or a simple form handler, this attribute helps create smooth, user-friendly experiences with minimal effort.