Flash Messages

Flash messages are a handy way to let the user know the outcome of a request, either as a success or failure. Use the ajax()->flash() method to display a message after the request finishes. Flash messages are usually set inside AJAX handlers.

function onSave()
{
    // Sets a successful message
    return ajax()->flash('success', 'Settings successfully saved!');
}

The first argument is the message type: success, error, warning, or info.

function onSave()
{
    return ajax()
        ->flash('success', 'Settings saved!')
        ->flash('info', 'Remember to publish your changes.');
}

You can combine flash messages with other response methods like update():

function onDeleteItem()
{
    // Delete item...

    return ajax()
        ->flash('success', 'Item deleted')
        ->update(['#items-list' => view('partials.items-list')]);
}

Flash messages will disappear after an interval of 3 seconds. Clicking on a flash message will stop it from disappearing.

Loading Flash Message

The data-request-message attribute can be used to display a flash progress message while the request runs. This is great particularly for long running processes.

<button
    data-request="onSubmit"
    data-request-message="Please wait while we process your request...">
    Submit
</button>

Styling the Flash Message

To change the appearance of the flash message, target the .jax-flash-message CSS class.

.jax-flash-message.success {
    background: green;
}
.jax-flash-message.error {
    background: red;
}
.jax-flash-message.warning {
    background: orange;
}
.jax-flash-message.info {
    background: aqua;
}
.jax-flash-message.loading {
    background: aqua;
}

Working with JavaScript

Use the jax.flashMsg function to display a flash message using JavaScript. A type can be specified as either success, error or warning. An optional interval can be specified to control how long the flash message is displayed in seconds.

jax.flashMsg({
    message: 'Record has been successfully saved. This message will disappear in 1 second.',
    type: 'success',
    interval: 1
});

Using Flash for Errors

By default, AJAX errors are displayed using the native alert() dialog. You can use the data-request-flash attribute to show recoverable errors as flash messages instead.

<button
    data-request="onSubmit"
    data-request-flash>
    Submit
</button>

Using the JavaScript API, set flash: true in the options.

jax.request('onSubmit', { flash: true });

Error Severity

The framework distinguishes between two types of errors:

Severity	Examples	Display with data-request-flash
Recoverable	Validation errors, business logic errors (ajax()->error())	Flash message
Fatal	Database errors, 500 errors (ajax()->fatal())	Native alert()

Fatal errors always use the native alert() dialog, even when data-request-flash is enabled. This ensures critical errors are always visible to the user. You can still customize fatal error display by listening to the ajax:error-message event.

Message Type Filtering

You can filter which flash message types are displayed using the attribute value. This controls messages sent from the server via ajax()->flash().

<!-- Default: shows all standard types (success, error, warning, info) -->
<button data-request="onSubmit" data-request-flash>

<!-- Only specific types -->
<button data-request="onSubmit" data-request-flash="error,success">

<!-- All types except specific ones (negation with minus prefix) -->
<button data-request="onSubmit" data-request-flash="-error">

Inline Validation

To display validation errors next to form fields in addition to flash messages, use data-request-validate. To show inline validation only (without flash), use data-request-flash="-validate". See Form Validation for details.

Customizing Alerts

When an AJAX request returns an error message, the framework triggers the ajax:error-message event before showing the native alert(). You can intercept this to use your own notification library.

addEventListener('ajax:error-message', function(event) {
    event.preventDefault();

    Swal.fire({
        icon: 'error',
        title: 'Error',
        text: event.detail.message
    });
});

TIP

This event fires for both recoverable and fatal errors. Use it to implement consistent error styling across your application.

Customizing Confirms

When a request has a confirm option (via data-request-confirm or the JavaScript API), the framework triggers the ajax:confirm-message event. The event detail includes a promise object that you must resolve or reject to continue or cancel the request.

addEventListener('ajax:confirm-message', function(event) {
    event.preventDefault();

    const { message, promise } = event.detail;

    Swal.fire({
        title: 'Confirm',
        text: message,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        result.isConfirmed ? promise.resolve() : promise.reject();
    });
});

TIP

For customizing loading indicators, see Loading Indicators.