Problem/Motivation
Provide a consistent method for displaying messages in JavaScript.
Currently the Settings tray module needs to provide various message via JavaScript in:
#2773601: Display "You are now in edit mode" prompt when user enters edit mode
#2785047: In Outside In mode, form validation messages should appear in the off-canvas tray, not the main page
And also Inline Form Errors needs to be able to update messages through JavaScript:
#2876321: Update inline form errors summary after form validation with AJAX
Proposed resolution
Change div for {{ messages }} to always be rendered and add a data-drupal-messages
attribute for JavaScript to select.
Add new methods for:
- Adding a message
- Removing one or multiple messages
- Clearing all messages of a specific type
- Clearing all messages
How to test manually
- Apply the latest patch
- Install standard
- Install the js_message_test module. You need to ensure
$settings['extension_discovery_scan_tests'] = TRUE;
is in your settings.php in order to enable it. - Visit the url
/js_message_test_link
on your site.
Remaining tasks
Review patch
Write change record
API changes
Persistent div for {{ messages }} would be required in themes.
API Additions
const messageInterface = new Drupal.Message();
const messageId = messageInterface.add(message, options);
const messageList = messageInterface.select(type);
messageInterface.remove(messageId);
messageInterface.clear();
Original report by kkaefer
While developing some JavaScript enhancements for Drupal, I am facing the problem of how to indicate the status of an action properly. For example, when editing a label, the user needs to know if the action has been successful (saving the new title) or if it failed. Of course, some widgets can use their own status indicating system (like the autocomplete textfield), but others have to display text.
But – we already have status messages in Drupal! Take a look at theme_status_message()
. We just need to make sure that the status message div
is always there so that we can inject new items via JavaScript... How about that? Post your opinion or your own suggestion for this issue.