diff --git a/core/misc/ajax.js b/core/misc/ajax.js index fefe9f3031..0502c477af 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -1015,6 +1015,10 @@ * The XMLHttpRequest status. */ insert: function (ajax, response, status) { + if (!response.data) { + return; + } + // Get information from the response. If it is not there, default to // our presets. var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper); @@ -1027,22 +1031,30 @@ // $(response.data) as new HTML rather than a CSS selector. Also, if // response.data contains top-level text nodes, they get lost with either // $(response.data) or $('
').replaceWith(response.data). - var $new_content_wrapped = $('
').html(response.data); - var $new_content = $new_content_wrapped.contents(); - - // For legacy reasons, the effects processing code assumes that - // $new_content consists of a single top-level element. Also, it has not - // been sufficiently tested whether attachBehaviors() can be successfully - // called with a context object that includes top-level text nodes. - // However, to give developers full control of the HTML appearing in the - // page, and to enable Ajax content to be inserted in places where
- // elements are not allowed (e.g., within , , and - // parents), we check if the new content satisfies the requirement - // of a single top-level element, and only use the container
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 $new_content; + + // If only NODE_ELEMENT or COMMENT_NODE elements are returned skip wrap processing. + var responseDataWrappedContents = $.parseHTML(response.data.trim(), true); + var isAllElementNode = responseDataWrappedContents.every(function (element) { + return element.nodeType === Node.ELEMENT_NODE || element.nodeType === Node.COMMENT_NODE; + }); + + if (!isAllElementNode) { + // If response.data contains TEXT_ELEMENT type only or target element + // is not a block level element, response.data will be wrapped with SPAN. + if (responseDataWrappedContents.length === 1 || ($wrapper.css('display') !== 'block')) { + $new_content = $('').html(response.data); + } + else { + $new_content = $('
').html(response.data); + } + } + else { + $new_content = $(response.data); } // If removing content from the wrapper, detach behaviors first. @@ -1053,7 +1065,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 +1096,12 @@ 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); + // Attach behaviors to all element nodes. + $new_content.each(function () { + if (this.nodeType === Node.ELEMENT_NODE) { + 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..add761c493 --- /dev/null +++ b/core/modules/system/tests/modules/ajax_test/js/insert-ajax.js @@ -0,0 +1,40 @@ +/** + * @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: event.currentTarget.getAttribute('data-method') + }; + var myAjaxObject = Drupal.ajax(ajaxSettings); + myAjaxObject.execute(); + }); + + $('.ajax-insert-inline').once('ajax-insert').on('click', function (event) { + event.preventDefault(); + var ajaxSettings = { + url: event.currentTarget.getAttribute('href'), + wrapper: 'ajax-target-inline', + base: false, + element: false, + method: event.currentTarget.getAttribute('data-method') + }; + 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..58dd9f32b0 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,61 @@ 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 function renderTypes($type) { + $content = [ + '#title' => 'AJAX Dialog & contents', + 'content' => [ + '#type' => 'inline_template', + '#template' => $this->getRenderTypes()[$type], + ], + ]; + + return $content; + } + + /** + * Returns a render array of links that directly Drupal.ajax(). + */ + public function insertLinks() { + $methods = [ + 'html', + 'replaceWith', + ]; + + $build['links'] = [ + 'ajax_target' => [ + '#markup' => '
Target
Inline Test:
TEXT TEXT', + ], + 'links' => [ + '#theme' => 'links', + '#attached' => ['library' => ['ajax_test/ajax_insert']], + ], + ]; + foreach ($methods as $method) { + foreach (array_keys($this->getRenderTypes()) as $type) { + $class = $type == 'inline' ? 'ajax-insert-inline' : 'ajax-insert'; + $build['links']['links']['#links']["$method-$type"] = [ + 'title' => "Link $method $type", + 'url' => Url::fromRoute('ajax_test.ajax_render_types', ['type' => $type]), + 'attributes' => [ + 'class' => [$class], + 'data-method' => $method, + ], + ]; + } + } + return $build; + } + + /** * Returns a render array that will be rendered by AjaxRenderer. * * Verifies that the response incorporates JavaScript settings generated @@ -222,4 +277,23 @@ public function dialogClose() { return $response; } + /** + * Render types. + * + * @return array + * Render types. + */ + protected function getRenderTypes() { + return [ + 'pre-wrapped' => '
pre-wrapped
', + 'pre-wrapped-whitespace' => '
pre-wrapped-whitespace
' . "\r\n", + 'not-wrapped' => 'not-wrapped', + 'comment-not-wrapped' => '
comment-not-wrapped
', + 'mixed' => ' foo foo bar

some string

additional not wrapped strings,

final string

', + 'inline' => 'inline
BLOCK LEVEL
', + 'empty' => '', + ]; + } + } + diff --git a/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php b/core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php index e05940537c..98d2222670 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,79 @@ 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(); + + $test_cases = [ + // Test that no additional wrapper is added when inserting already wrapped + // response data and all top-level node elements (context) are processed + // correctly. + [ + 'render_type' => 'pre-wrapped', + 'expected' => '
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. + [ + 'render_type' => 'pre-wrapped-whitespace', + 'expected' => '
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. + [ + 'render_type' => 'not-wrapped', + 'expected' => 'not-wrapped', + ], + // Test that top-level comments (which are not lead by text nodes) are + // inserted without wrapper. + [ + 'render_type' => 'comment-not-wrapped', + 'expected' => '
comment-not-wrapped
', + ], + // Test that wrappend and not-wrapped response data is inserted correctly + // and all top-level node elements (context) are processed correctly. + [ + 'method' => 'html', + 'render_type' => 'mixed', + 'expected' => '
foo foo bar

some string

additional not wrapped strings,

final string

', + ], + // Test that inline response data. + [ + 'render_type' => 'inline', + 'expected' => 'inline
BLOCK LEVEL
', + ], + // Test that empty response data. + [ + 'render_type' => 'empty', + 'expected' => '', + ], + ]; + + foreach (['html', 'replaceWith'] as $method) { + foreach ($test_cases as $test_case) { + $this->drupalGet('ajax-test/insert'); + $this->clickLink("Link $method {$test_case['render_type']}"); + $assert->assertWaitOnAjaxRequest(); + switch ($method) { + case 'html': + $assert->responseContains($this->wrapAjaxTarget($test_case['expected'])); + break; + + case 'replaceWith': + $assert->responseContains($test_case['expected']); + $assert->responseNotContains($this->wrapAjaxTarget($test_case['expected'])); + break; + } + } + } + } + }