created
- // above when it doesn't. For more information, please see
- // https://www.drupal.org/node/736066.
- if ($new_content.length !== 1 || $new_content.get(0).nodeType !== 1) {
- $new_content = $new_content_wrapped;
+ // attachBehaviors() can, for the same reason, not be called with a
+ // context object that includes top-level text nodes. Therefore text nodes
+ // will be wrapped with a
element. This also gives themers the
+ // possibility to style the response.
+
+ var $responseDataWrapped = $('').html(response.data);
+ var $new_content = $('');
+ var elementsReturnedCount = $responseDataWrapped.contents().length;
+
+ // If only one node element is returned skip wrap processing.
+ if (elementsReturnedCount === 1 && response.data === Node.ELEMENT_NODE) {
+ $new_content = response.data;
+ }
+ else {
+ var $intermediateWrapper = null;
+
+ $responseDataWrapped.contents().each(function (index, value) {
+ // Make sure all not-element nodes are wrapped.
+ if (value.nodeType !== Node.ELEMENT_NODE) {
+ if ($intermediateWrapper) {
+ $intermediateWrapper.append(value);
+ }
+ // Make an exception for comments that are not after a text node.
+ // This is especially helpful for when theme debugging is turned on.
+ else if (value.nodeType === Node.COMMENT_NODE) {
+ $new_content.append(value);
+ }
+ // Only create a wrapper if there is more than whitespace.
+ else if ($.trim(value.nodeValue).length) {
+ $intermediateWrapper = $('');
+ $intermediateWrapper.append(value);
+ }
+ }
+ else {
+ $new_content.append($intermediateWrapper, value);
+ $intermediateWrapper = null;
+ }
+
+ // There are no other elements to process anymore, so add the
+ // intermediate wrapper to the content if present.
+ if (index === elementsReturnedCount - 1 && $intermediateWrapper) {
+ $new_content.append($intermediateWrapper);
+ }
+ });
+
+ $new_content = $new_content.contents();
}
// If removing content from the wrapper, detach behaviors first.
@@ -1053,7 +1083,10 @@
case 'empty':
case 'remove':
settings = response.settings || ajax.settings || drupalSettings;
- Drupal.detachBehaviors($wrapper.get(0), settings);
+ // Detach behaviors of all the to be removed element nodes.
+ $wrapper.children().each(function () {
+ Drupal.detachBehaviors(this, settings);
+ });
}
// Add the new content to the page.
@@ -1081,7 +1114,15 @@
if ($new_content.parents('html').length > 0) {
// Apply any settings from the returned JSON if available.
settings = response.settings || ajax.settings || drupalSettings;
- Drupal.attachBehaviors($new_content.get(0), settings);
+ if (method === 'replaceWith') {
+ Drupal.attachBehaviors($wrapper.get(0), settings);
+ }
+ else {
+ // Attach behaviors to all element nodes.
+ $wrapper.children().each(function () {
+ Drupal.attachBehaviors(this, settings);
+ });
+ }
}
},
diff --git a/core/modules/system/tests/modules/ajax_test/ajax_test.libraries.yml b/core/modules/system/tests/modules/ajax_test/ajax_test.libraries.yml
index f1c73064bd..772a05f734 100644
--- a/core/modules/system/tests/modules/ajax_test/ajax_test.libraries.yml
+++ b/core/modules/system/tests/modules/ajax_test/ajax_test.libraries.yml
@@ -1,3 +1,8 @@
+ajax_insert:
+ js:
+ js/insert-ajax.js: {}
+ dependencies:
+ - core/drupal.ajax
order:
drupalSettings:
ajax: test
diff --git a/core/modules/system/tests/modules/ajax_test/ajax_test.routing.yml b/core/modules/system/tests/modules/ajax_test/ajax_test.routing.yml
index e8d06c0a9f..89191a1c63 100644
--- a/core/modules/system/tests/modules/ajax_test/ajax_test.routing.yml
+++ b/core/modules/system/tests/modules/ajax_test/ajax_test.routing.yml
@@ -6,6 +6,14 @@ ajax_test.dialog_contents:
requirements:
_access: 'TRUE'
+ajax_test.ajax_render_types:
+ path: '/ajax-test/dialog-contents-types/{type}'
+ defaults:
+ _title: 'AJAX Dialog contents routing'
+ _controller: '\Drupal\ajax_test\Controller\AjaxTestController::renderTypes'
+ requirements:
+ _access: 'TRUE'
+
ajax_test.dialog_form:
path: '/ajax-test/dialog-form'
defaults:
@@ -21,6 +29,13 @@ ajax_test.dialog:
requirements:
_access: 'TRUE'
+ajax_test.insert_links:
+ path: '/ajax-test/insert'
+ defaults:
+ _controller: '\Drupal\ajax_test\Controller\AjaxTestController::insertLinks'
+ requirements:
+ _access: 'TRUE'
+
ajax_test.dialog_close:
path: '/ajax-test/dialog-close'
defaults:
diff --git a/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js b/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js
new file mode 100644
index 0000000000..fae6c71f36
--- /dev/null
+++ b/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js
@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Provides method to test ajax requests.
+ */
+
+(function ($, window, Drupal, drupalSettings) {
+ 'use strict';
+
+ Drupal.behaviors.insertTest = {
+ attach: function (context, settings) {
+ $('.ajax-insert').once('ajax-insert').on('click', function (event) {
+ event.preventDefault();
+ var ajaxSettings = {
+ url: event.currentTarget.getAttribute('href'),
+ wrapper: 'ajax-target',
+ base: false,
+ element: false,
+ method: 'html'
+ };
+ var myAjaxObject = Drupal.ajax(ajaxSettings);
+ myAjaxObject.execute();
+ });
+
+ $(context).addClass('processed');
+ }
+ };
+})(jQuery, window, Drupal, drupalSettings);
diff --git a/core/modules/system/tests/modules/ajax_test/src/Controller/AjaxTestController.php b/core/modules/system/tests/modules/ajax_test/src/Controller/AjaxTestController.php
index 5ba65e8013..6a728e2491 100644
--- a/core/modules/system/tests/modules/ajax_test/src/Controller/AjaxTestController.php
+++ b/core/modules/system/tests/modules/ajax_test/src/Controller/AjaxTestController.php
@@ -43,6 +43,84 @@ public static function dialogContents() {
}
/**
+ * Example content for testing whether response should be wrapped in div.
+ *
+ * @param string $type
+ * Type of response.
+ *
+ * @return array
+ * Renderable array of AJAX response contents.
+ */
+ public static function renderTypes($type) {
+ switch ($type) {
+ case 'pre-wrapped':
+ $markup = '' . $type . '
';
+ break;
+
+ case 'pre-wrapped-leading-whitespace':
+ $markup = ' ' . $type . '
';
+ break;
+
+ case 'not-wrapped':
+ $markup = $type;
+ break;
+
+ case 'comment-not-wrapped':
+ $markup = '' . $type . '
';
+ break;
+
+ case 'mixed':
+ $markup = ' foo foo bar additional not wrapped strings, final string
';
+ break;
+ }
+
+ $content = [
+ '#title' => 'AJAX Dialog & contents',
+ 'content' => [
+ '#type' => 'inline_template',
+ '#template' => !empty($markup) ? $markup : '',
+ ],
+ ];
+
+ return $content;
+ }
+
+ /**
+ * Returns a render array of links that directly Drupal.ajax().
+ */
+ public function insertLinks() {
+ $types = [
+ 'pre-wrapped',
+ 'pre-wrapped-leading-whitespace',
+ 'not-wrapped',
+ 'comment-not-wrapped',
+ 'mixed',
+ ];
+
+ $build['links'] = [
+ 'ajax_target' => [
+ '#markup' => 'Target
',
+ ],
+ 'links' => [
+ '#theme' => 'links',
+ '#attached' => ['library' => ['ajax_test/ajax_insert']],
+ ],
+ ];
+
+ foreach ($types as $type) {
+ $build['links']['links']['#links'][$type] = [
+ 'title' => "Link $type",
+ 'url' => Url::fromRoute('ajax_test.ajax_render_types', ['type' => $type]),
+ 'attributes' => [
+ 'class' => ['ajax-insert'],
+ ],
+ ];
+ }
+
+ return $build;
+ }
+
+ /**
* Returns a render array that will be rendered by AjaxRenderer.
*
* Verifies that the response incorporates JavaScript settings generated
diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php
index e05940537c..0f29960307 100644
--- a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php
@@ -16,6 +16,19 @@ class AjaxTest extends JavascriptTestBase {
*/
public static $modules = ['ajax_test'];
+ /**
+ * Wrap HTML with an AJAX target div.
+ *
+ * @param string $html
+ * The HTML to wrap.
+ *
+ * @return string
+ * The HTML wrapped in the an AJAX target div.
+ */
+ protected function wrapAjaxTarget($html) {
+ return '' . $html . '
';
+ }
+
public function testAjaxWithAdminRoute() {
\Drupal::service('theme_installer')->install(['stable', 'seven']);
$theme_config = \Drupal::configFactory()->getEditable('system.theme');
@@ -82,4 +95,48 @@ public function testDrupalSettingsCachingRegression() {
$this->assertNotContains($fake_library, $libraries);
}
+ /**
+ * Tests that various AJAX responses with DOM elements are correctly inserted.
+ *
+ * After inserting DOM elements, Drupal JavaScript behaviors should be
+ * reattached and all top-level elements of type Node.ELEMENT_NODE need to be
+ * part of the context.
+ */
+ public function testInsert() {
+ $assert = $this->assertSession();
+ $this->drupalGet('ajax-test/insert');
+
+ // Test that no additional wrapper is added when inserting already wrapped
+ // response data and all top-level node elements (context) are processed
+ // correctly.
+ $this->clickLink('Link pre-wrapped');
+ $assert->assertWaitOnAjaxRequest();
+ $assert->responseContains($this->wrapAjaxTarget('pre-wrapped
'));
+
+ // Test that no additional empty leading div is added when the return
+ // value had a leading space and all top-level node elements (context) are
+ // processed correctly.
+ $this->clickLink('Link pre-wrapped-leading-whitespace');
+ $assert->assertWaitOnAjaxRequest();
+ $assert->responseContains($this->wrapAjaxTarget('pre-wrapped-leading-whitespace
'));
+
+ // Test that not wrapped response data (text node) is inserted wrapped and
+ // all top-level node elements (context) are processed correctly.
+ $this->clickLink('Link not-wrapped');
+ $assert->assertWaitOnAjaxRequest();
+ $assert->responseContains($this->wrapAjaxTarget('not-wrapped'));
+
+ // Test that top-level comments (which are not lead by text nodes) are
+ // inserted without wrapper.
+ $this->clickLink('Link comment-not-wrapped');
+ $assert->assertWaitOnAjaxRequest();
+ $assert->responseContains($this->wrapAjaxTarget(''));
+
+ // Test that wrappend and not-wrapped response data is inserted correctly
+ // and all top-level node elements (context) are processed correctly.
+ $this->clickLink('Link mixed');
+ $assert->assertWaitOnAjaxRequest();
+ $assert->responseContains($this->wrapAjaxTarget(' foo foo bar additional not wrapped strings, final string
'));
+ }
+
}