Is there a reliable way to show Drupal messages from JavaScript?

Question

I need to show status messages (the kind typically shown by drupal_set_message()) in my module's JavaScript code. How can I do this reliably, such that the theme and placement of the messages remains consistent with the way drupal_set_message() does it?

I'm looking for a solution that accounts for the presence or absence of prior messages on the page, and that works for any theme.

Pointing to existing modules that perform this would be great!

Answer 1

This API available in Drupal since 8.7.0. See details here.

Just an example:

const messages = new Drupal.Message();
// Probably you want to clean up previously rendered messages:
messages.clear();
messages.add('test message');
messages.warning('test warning message');
messages.error('test error message');

Don't forget to add a dependency for your custom library - core/drupal.message.

For Drupal 7 you need to use one of the contrib solutions.

Answer 2

I'm using Nice messages module to replace every message with a popup in the corner of the screen.

https://drupal.org/project/nicemessages

It lets you choose if you want the messages of a status to stay visible until closed, or auto close after x seconds. And add a handy "close all" if there are more than one.

If anything, check out how it works. It's a good starting point i guess.

Answer 3

There are various modules out there that can replace the use of drupal_set_message or the Messenger service with JavaScript based libraries. SweetAlert is one such module.

You could replace the Messenger service with your own for deeper customization, too.

Like the JavaScript based tools, your implementation code could theme the response as a message and write it into the area it should appear.