A new add_js Ajax command was added so that command execution can wait for the JavaScript files to be loaded before continuing to the next command.
With this change, the execution flow of Ajax Commands is modified. Previously, when adding JavaScript files via AJAX, commands that followed the JavaScript-adding command did not wait for that loading to complete. This led to problems where code would execute before its dependencies were fully loaded.
API changes
Ajax commands can now return a promise to ensure that the command is complete before executing the next ajax command in the queue.
// This command will wait for one second. The command execution queue will be
// paused until the promise is resolved to continue.
Drupal.AjaxCommands.prototype.delayedCommand = function (ajax, response) {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});
}
The Drupal.Ajax.prototype.success method now returns a promise, if your code overrides this method, make sure to return a promise. A typical pattern would be:
const oldSuccess = Drupal.Ajax.prototype.success;
Drupal.Ajax.prototype.success = function (response, status) {
// Custom processing here
// Make sure that this method returns a Promise.
return oldSuccess.call(this, response, status);
};
If the success method doesn't return a promise and some of the Ajax commands are using promises in the execution, the status of ajax.ajaxing will not be accurate as it can be set to false before the end of the command execution.
From Drupal 9.5.0-BETA1 to 9.5.0-RC1, the change of Drupal.Ajax.prototype.success to return a Promise created a regression where jQuery's ajaxSuccess, ajaxComplete, and ajaxStop events were triggered before the response's Ajax commands were executed. In Drupal 9.5.0-RC2 and 10.0.0-RC3, this has been fixed, and these events are now triggered after the commands have been executed, as was the case in Drupal 9.4 and lower.