diff -u b/core/lib/Drupal/Core/Ajax/AddJsCommand.php b/core/lib/Drupal/Core/Ajax/AddJsCommand.php --- b/core/lib/Drupal/Core/Ajax/AddJsCommand.php +++ b/core/lib/Drupal/Core/Ajax/AddJsCommand.php @@ -3,10 +3,11 @@ namespace Drupal\Core\Ajax; /** - * An AJAX command for adding JS to the page via ajax. + * An AJAX command for adding JS to the page via AJAX. * - * This command is implemented by Drupal.AjaxCommands.prototype.add_js() - * defined in misc/ajax.js. + * This command will make sure all the files are loaded before continuing + * executing the next AJAX command. This command is implemented by + * Drupal.AjaxCommands.prototype.add_js() defined in misc/ajax.js. * * @see misc/ajax.js * @@ -15,8 +16,7 @@ class AddJsCommand implements CommandInterface { /** - * An array containing the attributes of the 'script' tags to be added to the - * page. + * An array containing attributes of the scripts to be added to the page. * * @var string[] */ @@ -28,7 +28,7 @@ * If the command is a response to a request from an #ajax form element then * this value can be NULL. * - * @var string|null + * @var string */ protected $selector; @@ -38,7 +38,7 @@ * @param array $scripts * An array containing the attributes of the 'script' tags to be added to * the page. - * @param string|null $selector + * @param string $selector * A CSS selector. */ public function __construct(array $scripts, string $selector = 'body') { diff -u b/core/misc/ajax.es6.js b/core/misc/ajax.es6.js --- b/core/misc/ajax.es6.js +++ b/core/misc/ajax.es6.js @@ -550,7 +550,7 @@ // when the return is not a Promise we make sure it can be used as // one. This is useful for code that overrides the success method. Promise.resolve(ajax.success(response, status)) - // Ajaxing status is back to false when all the ajax commands have + // Ajaxing status is back to false when all the AJAX commands have // finished executing. .then(() => { ajax.ajaxing = false; @@ -1042,9 +1042,9 @@ return ( this.commandExecutionQueue(response, status) - // If the focus hasn't been changed by the ajax commands, try to refocus the - // triggering element or one of its parents if that element does not exist - // anymore. + // If the focus hasn't been changed by the AJAX commands, try to refocus + // the triggering element or one of its parents if that element does not + // exist anymore. .then(() => { if ( !focusChanged && @@ -1065,9 +1065,9 @@ } } // Reattach behaviors, if they were detached in beforeSerialize(). The - // attachBehaviors() called on the new content from processing the response - // commands is not sufficient, because behaviors from the entire form need - // to be reattached. + // attachBehaviors() called on the new content from processing the + // response commands is not sufficient, because behaviors from the + // entire form need to be reattached. if (this.$form && document.body.contains(this.$form.get(0))) { const settings = this.settings || drupalSettings; Drupal.attachBehaviors(this.$form.get(0), settings); @@ -1686,14 +1686,15 @@ add_js(ajax, response, status) { const parentEl = document.querySelector(response.selector || 'body'); const settings = ajax.settings || drupalSettings; - const allUniqueBundleIDs = response.data.map((script) => { + const allUniqueBundleIds = response.data.map((script) => { // loadjs requires a unique ID, AJAX instances' `instanceIndex` are // guaranteed to be unique. // @see Drupal.behaviors.AJAX.detach - const uniqueBundleID = script.src + ajax.instanceIndex; - loadjs(script.src, uniqueBundleID, { - // By default, dynamically added scripts are marked as async. Only - // explicitly marked async scripts should be loaded async. + const uniqueBundleId = script.src + ajax.instanceIndex; + loadjs(script.src, uniqueBundleId, { + // The default loadjs behavior is to load script with async, in Drupal + // we need to explicitly tell scripts to load async, this is set in + // the before callback below if necessary. async: false, before(path, scriptEl) { // This allows all attributes to be added, like defer, async and @@ -1707,18 +1708,19 @@ // consistency, because it doesn't actually matter for the script // where it is added. Developers however expect library assets to // show up where they declared them, so this makes things consistent - // with the assets that are not loaded with ajax. + // with the assets that are not loaded with AJAX. parentEl.appendChild(scriptEl); - // Return `false` to bypass loadjs' default DOM insertion mechanism. + // Return false to bypass loadjs' default DOM insertion mechanism. return false; }, }); - return uniqueBundleID; + return uniqueBundleId; }); - // Returns the promise so that the next AJAX command waits on the completion - // of this one to execute, ensuring the JS is loaded before executing. + // Returns the promise so that the next AJAX command waits on the + // completion of this one to execute, ensuring the JS is loaded before + // executing. return new Promise((resolve, reject) => { - loadjs.ready(allUniqueBundleIDs, { + loadjs.ready(allUniqueBundleIds, { success() { Drupal.attachBehaviors(parentEl, settings); // All JS files were loaded and new and old behaviors have @@ -1728,8 +1730,8 @@ }, error(depsNotFound) { const message = Drupal.t( - `The following files could not be loaded: @deps`, - { '@deps': depsNotFound.join(', ') }, + `The following files could not be loaded: @dependencies`, + { '@dependencies': depsNotFound.join(', ') }, ); reject(message); }, diff -u b/core/misc/ajax.js b/core/misc/ajax.js --- b/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -686,9 +686,9 @@ add_js(ajax, response, status) { const parentEl = document.querySelector(response.selector || 'body'); const settings = ajax.settings || drupalSettings; - const allUniqueBundleIDs = response.data.map(script => { - const uniqueBundleID = script.src + ajax.instanceIndex; - loadjs(script.src, uniqueBundleID, { + const allUniqueBundleIds = response.data.map(script => { + const uniqueBundleId = script.src + ajax.instanceIndex; + loadjs(script.src, uniqueBundleId, { async: false, before(path, scriptEl) { @@ -700,18 +700,18 @@ } }); - return uniqueBundleID; + return uniqueBundleId; }); return new Promise((resolve, reject) => { - loadjs.ready(allUniqueBundleIDs, { + loadjs.ready(allUniqueBundleIds, { success() { Drupal.attachBehaviors(parentEl, settings); resolve(); }, error(depsNotFound) { - const message = Drupal.t(`The following files could not be loaded: @deps`, { - '@deps': depsNotFound.join(', ') + const message = Drupal.t(`The following files could not be loaded: @dependencies`, { + '@dependencies': depsNotFound.join(', ') }); reject(message); }