diff --git a/core/core.api.php b/core/core.api.php index 4f937e375f..8591bc6963 100644 --- a/core/core.api.php +++ b/core/core.api.php @@ -2319,20 +2319,21 @@ function hook_validation_constraint_alter(array &$definitions) { * an array. Here are the details of its elements, all of which are optional: * - callback: The callback to invoke to handle the server side of the * Ajax event. More information on callbacks is below in @ref sub_callback. - * - wrapper: The HTML 'id' attribute of the area where the content returned by - * the callback should be placed. Note that callbacks have a choice of - * returning content or JavaScript commands; 'wrapper' is used for content - * returns. + * - wrapper_selector: The CSS selector of the area where the content returned + * by the callback should be placed. Note that callbacks have a choice of + * returning content or JavaScript commands; 'wrapper_selector' is used for + * content returns. * - method: The jQuery method for placing the new content (used with - * 'wrapper'). Valid options are 'replaceWith' (default), 'append', 'prepend', - * 'before', 'after', or 'html'. See + * 'wrapper_selector'). Valid options are 'replaceWith' (default), 'append', + * 'prepend', 'before', 'after', or 'html'. See * http://api.jquery.com/category/manipulation/ for more information on these * methods. * - effect: The jQuery effect to use when placing the new HTML (used with - * 'wrapper'). Valid options are 'none' (default), 'slide', or 'fade'. - * - speed: The effect speed to use (used with 'effect' and 'wrapper'). Valid - * options are 'slow' (default), 'fast', or the number of milliseconds the - * effect should run. + * 'wrapper_selector'). Valid options are 'none' (default), 'slide', or + * 'fade'. + * - speed: The effect speed to use (used with 'effect' and 'wrapper_selector'). + * Valid options are 'slow' (default), 'fast', or the number of milliseconds + * the effect should run. * - event: The JavaScript event to respond to. This is selected automatically * for the type of form element; provide a value to override the default. * - prevent: A JavaScript event to prevent when the event is triggered. For @@ -2372,8 +2373,8 @@ function hook_validation_constraint_alter(array &$definitions) { * Once you have processed the input, you have your choice of returning HTML * markup or a set of Ajax commands. If you choose to return HTML markup, you * can return it as a string or a renderable array, and it will be placed in - * the defined 'wrapper' element (see documentation above in @ref sub_form). - * In addition, any messages returned by + * the defined 'wrapper_selector' element (see documentation above in + * @ref sub_form). In addition, any messages returned by * \Drupal\Core\Messenger\Messenger::all(), themed as in * status-messages.html.twig, will be prepended. * @@ -2397,8 +2398,8 @@ function hook_validation_constraint_alter(array &$definitions) { * invokes an arbitrary jQuery command. * * As noted above, status messages are prepended automatically if you use the - * 'wrapper' method and return HTML markup. This is not the case if you return - * commands, but if you would like to show status messages, you can add + * 'wrapper_selector' method and return HTML markup. This is not the case if you + * return commands, but if you would like to show status messages, you can add * @code * array('#type' => 'status_messages') * @endcode diff --git a/core/lib/Drupal/Core/Field/Plugin/Field/FieldType/EntityReferenceItem.php b/core/lib/Drupal/Core/Field/Plugin/Field/FieldType/EntityReferenceItem.php index f87a0d8bd6..34f2b4e1c8 100644 --- a/core/lib/Drupal/Core/Field/Plugin/Field/FieldType/EntityReferenceItem.php +++ b/core/lib/Drupal/Core/Field/Plugin/Field/FieldType/EntityReferenceItem.php @@ -637,7 +637,7 @@ public static function fieldSettingsAjaxProcessElement(&$element, $main_form) { if (!empty($element['#ajax'])) { $element['#ajax'] = [ 'callback' => [get_called_class(), 'settingsAjax'], - 'wrapper' => $main_form['#id'], + 'wrapper_selector' => '#' . $main_form['#id'], 'element' => $main_form['#array_parents'], ]; } diff --git a/core/lib/Drupal/Core/Field/WidgetBase.php b/core/lib/Drupal/Core/Field/WidgetBase.php index 63671576b2..8f1e7363df 100644 --- a/core/lib/Drupal/Core/Field/WidgetBase.php +++ b/core/lib/Drupal/Core/Field/WidgetBase.php @@ -249,7 +249,7 @@ protected function formMultipleElements(FieldItemListInterface $items, array &$f '#submit' => [[get_class($this), 'addMoreSubmit']], '#ajax' => [ 'callback' => [get_class($this), 'addMoreAjax'], - 'wrapper' => $wrapper_id, + 'wrapper_selector' => '#' . $wrapper_id, 'effect' => 'fade', ], ]; diff --git a/core/lib/Drupal/Core/Render/Element/RenderElement.php b/core/lib/Drupal/Core/Render/Element/RenderElement.php index 35814589b3..d4c7ab383c 100644 --- a/core/lib/Drupal/Core/Render/Element/RenderElement.php +++ b/core/lib/Drupal/Core/Render/Element/RenderElement.php @@ -243,7 +243,7 @@ public static function processAjaxForm(&$element, FormStateInterface $form_state * - #ajax['url'] * - #ajax['callback'] * - #ajax['options'] - * - #ajax['wrapper'] + * - #ajax['wrapper_selector'] * - #ajax['parameters'] * - #ajax['effect'] * - #ajax['accepts'] @@ -328,6 +328,13 @@ public static function preRenderAjaxForm($element) { $settings = $element['#ajax']; + // @todo Remove support for 'wrapper' and solely use 'wrapper_selector'. + if (isset($settings['wrapper'])) { + @trigger_error('Use of "wrapper" is deprecated in Drupal 8.7.x and will be removed before Drupal 9.0.0. Use "wrapper_selector" instead and prefix the value with either "#" for IDs or "." for classes.', E_USER_DEPRECATED); + $settings['wrapper_selector'] = '#' . $settings['wrapper']; + unset($settings['wrapper']); + } + // Assign default settings. When 'url' is set to NULL, ajax.js submits the // Ajax request to the same URL as the form or link destination is for // someone with JavaScript disabled. This is generally preferred as a way to diff --git a/core/misc/ajax.es6.js b/core/misc/ajax.es6.js index a2609c02f4..26fa7ee377 100644 --- a/core/misc/ajax.es6.js +++ b/core/misc/ajax.es6.js @@ -7,8 +7,8 @@ * then executed to make any changes that are necessary to the page. * * Drupal uses this file to enhance form elements with `#ajax['url']` and - * `#ajax['wrapper']` properties. If set, this file will automatically be - * included to provide Ajax capabilities. + * `#ajax['wrapper_selector']` properties. If set, this file will automatically + * be included to provide Ajax capabilities. */ (function($, window, Drupal, drupalSettings) { @@ -360,8 +360,8 @@ function loadAjaxBehavior(base) { * then executed to make any changes that are necessary to the page. * * Drupal uses this file to enhance form elements with `#ajax['url']` and - * `#ajax['wrapper']` properties. If set, this file will automatically be - * included to provide Ajax capabilities. + * `#ajax['wrapper_selector']` properties. If set, this file will + * automatically be included to provide Ajax capabilities. * * @constructor * @@ -402,15 +402,19 @@ function loadAjaxBehavior(base) { */ this.instanceIndex = false; - // @todo Remove this after refactoring the PHP code to: - // - Call this 'selector'. - // - Include the '#' for ID-based selectors. - // - Support non-ID-based selectors. - if (this.wrapper) { + // @todo Remove support for 'wrapper' and solely use 'wrapper_selector'. + if (this.wrapper && !this.wrapper_selector) { /** * @type {string} */ - this.wrapper = `#${this.wrapper}`; + this.wrapper_selector = `#${this.wrapper}`; + + /** + * @deprecated Use this.wrapper_selector. + * + * @type {string} + */ + this.wrapper = this.wrapper_selector; } /** @@ -1085,7 +1089,7 @@ function loadAjaxBehavior(base) { this.progress.object.stopMonitoring(); } // Undo hide. - $(this.wrapper).show(); + $(this.wrapper_selector).show(); // Re-enable the element. $(this.element).prop('disabled', false); // Reattach behaviors, if they were detached in beforeSerialize(), and the @@ -1201,7 +1205,7 @@ function loadAjaxBehavior(base) { // our presets. const $wrapper = response.selector ? $(response.selector) - : $(ajax.wrapper); + : $(ajax.wrapper_selector); const method = response.method || ajax.method; const effect = ajax.getEffect(response); @@ -1255,7 +1259,7 @@ function loadAjaxBehavior(base) { // Attach all JavaScript behaviors to the new content, if it was // successfully added to the page, this if statement allows - // `#ajax['wrapper']` to be optional. + // `#ajax['wrapper_selector']` to be optional. if ($newContent.parents('html').length) { // Attach behaviors to all element nodes. $newContent.each((index, element) => { diff --git a/core/misc/ajax.js b/core/misc/ajax.js index 194c5e525a..601cf48c8a 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -172,8 +172,10 @@ function loadAjaxBehavior(base) { this.instanceIndex = false; - if (this.wrapper) { - this.wrapper = '#' + this.wrapper; + if (this.wrapper && !this.wrapper_selector) { + this.wrapper_selector = '#' + this.wrapper; + + this.wrapper = this.wrapper_selector; } this.element = element; @@ -489,7 +491,7 @@ function loadAjaxBehavior(base) { this.progress.object.stopMonitoring(); } - $(this.wrapper).show(); + $(this.wrapper_selector).show(); $(this.element).prop('disabled', false); @@ -513,7 +515,7 @@ function loadAjaxBehavior(base) { Drupal.AjaxCommands = function () {}; Drupal.AjaxCommands.prototype = { insert: function insert(ajax, response) { - var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper); + var $wrapper = response.selector ? $(response.selector) : $(ajax.wrapper_selector); var method = response.method || ajax.method; var effect = ajax.getEffect(response); diff --git a/core/misc/dialog/dialog.ajax.es6.js b/core/misc/dialog/dialog.ajax.es6.js index 2a017d29f8..b777d9bf2f 100644 --- a/core/misc/dialog/dialog.ajax.es6.js +++ b/core/misc/dialog/dialog.ajax.es6.js @@ -125,8 +125,8 @@ ).appendTo('body'); } // Set up the wrapper, if there isn't one. - if (!ajax.wrapper) { - ajax.wrapper = $dialog.attr('id'); + if (!ajax.selector) { + ajax.selector = '#' + $dialog.attr('id'); } // Use the ajax.js insert command to populate the dialog contents. diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js index de1d3c9219..43f99fb2d7 100644 --- a/core/misc/dialog/dialog.ajax.js +++ b/core/misc/dialog/dialog.ajax.js @@ -72,8 +72,8 @@ $dialog = $('
').appendTo('body'); } - if (!ajax.wrapper) { - ajax.wrapper = $dialog.attr('id'); + if (!ajax.selector) { + ajax.selector = '#' + $dialog.attr('id'); } response.command = 'insert'; diff --git a/core/modules/action/tests/action_form_ajax_test/src/Plugin/Action/ActionAjaxTest.php b/core/modules/action/tests/action_form_ajax_test/src/Plugin/Action/ActionAjaxTest.php index 8afc98cf54..02075a1d28 100644 --- a/core/modules/action/tests/action_form_ajax_test/src/Plugin/Action/ActionAjaxTest.php +++ b/core/modules/action/tests/action_form_ajax_test/src/Plugin/Action/ActionAjaxTest.php @@ -50,7 +50,7 @@ public function buildConfigurationForm(array $form, FormStateInterface $form_sta '#type' => 'checkbox', '#title' => $this->t('Are we having a party?'), '#ajax' => [ - 'wrapper' => 'party-container', + 'wrapper_selector' => '#party-container', 'callback' => [$this, 'partyCallback'], ], '#default_value' => $having_a_party, diff --git a/core/modules/block/src/BlockForm.php b/core/modules/block/src/BlockForm.php index 6998a64d46..35f4911de5 100644 --- a/core/modules/block/src/BlockForm.php +++ b/core/modules/block/src/BlockForm.php @@ -170,7 +170,7 @@ public function form(array $form, FormStateInterface $form_state) { '#default_value' => $theme, '#ajax' => [ 'callback' => '::themeSwitch', - 'wrapper' => 'edit-block-region-wrapper', + 'wrapper_selector' => '#edit-block-region-wrapper', ], ]; } diff --git a/core/modules/book/src/BookManager.php b/core/modules/book/src/BookManager.php index bfe55881af..00a470fa84 100644 --- a/core/modules/book/src/BookManager.php +++ b/core/modules/book/src/BookManager.php @@ -244,7 +244,7 @@ public function addFormElements(array $form, FormStateInterface $form_state, Nod '#attributes' => ['class' => ['book-title-select']], '#ajax' => [ 'callback' => 'book_form_update', - 'wrapper' => 'edit-book-plid-wrapper', + 'wrapper_selector' => '#edit-book-plid-wrapper', 'effect' => 'fade', 'speed' => 'fast', ], diff --git a/core/modules/config/src/Form/ConfigSingleExportForm.php b/core/modules/config/src/Form/ConfigSingleExportForm.php index 2f4a7df362..c2fce66f6c 100644 --- a/core/modules/config/src/Form/ConfigSingleExportForm.php +++ b/core/modules/config/src/Form/ConfigSingleExportForm.php @@ -104,7 +104,7 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t '#default_value' => $config_type, '#ajax' => [ 'callback' => '::updateConfigurationType', - 'wrapper' => 'edit-config-type-wrapper', + 'wrapper_selector' => '#edit-config-type-wrapper', ], ]; $default_type = $form_state->getValue('config_type', $config_type); @@ -117,7 +117,7 @@ public function buildForm(array $form, FormStateInterface $form_state, $config_t '#suffix' => '', '#ajax' => [ 'callback' => '::updateExport', - 'wrapper' => 'edit-export-wrapper', + 'wrapper_selector' => '#edit-export-wrapper', ], ]; diff --git a/core/modules/config/tests/config_test/src/ConfigTestForm.php b/core/modules/config/tests/config_test/src/ConfigTestForm.php index 163359613d..7e806363b2 100644 --- a/core/modules/config/tests/config_test/src/ConfigTestForm.php +++ b/core/modules/config/tests/config_test/src/ConfigTestForm.php @@ -73,7 +73,7 @@ public function form(array $form, FormStateInterface $form_state) { '#default_value' => $size, '#ajax' => [ 'callback' => '::updateSize', - 'wrapper' => 'size-wrapper', + 'wrapper_selector' => '#size-wrapper', ], ]; $form['size_wrapper']['size_submit'] = [ diff --git a/core/modules/editor/editor.module b/core/modules/editor/editor.module index aa8d988f58..d0c0d17889 100644 --- a/core/modules/editor/editor.module +++ b/core/modules/editor/editor.module @@ -130,7 +130,7 @@ function editor_form_filter_format_form_alter(&$form, FormStateInterface $form_s '#ajax' => [ 'trigger_as' => ['name' => 'editor_configure'], 'callback' => 'editor_form_filter_admin_form_ajax', - 'wrapper' => 'editor-settings-wrapper', + 'wrapper_selector' => '#editor-settings-wrapper', ], '#weight' => -10, ]; @@ -142,7 +142,7 @@ function editor_form_filter_format_form_alter(&$form, FormStateInterface $form_s '#submit' => ['editor_form_filter_admin_format_editor_configure'], '#ajax' => [ 'callback' => 'editor_form_filter_admin_form_ajax', - 'wrapper' => 'editor-settings-wrapper', + 'wrapper_selector' => '#editor-settings-wrapper', ], '#weight' => -10, '#attributes' => ['class' => ['js-hide']], diff --git a/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php b/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php index 170bcd093a..8e2f2e3fb4 100644 --- a/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php +++ b/core/modules/field_layout/src/Form/FieldLayoutEntityDisplayFormTrait.php @@ -65,7 +65,7 @@ public function form(array $form, FormStateInterface $form_state) { '#default_value' => $layout_plugin->getPluginId(), '#ajax' => [ 'callback' => '::settingsAjax', - 'wrapper' => 'field-layout-settings-wrapper', + 'wrapper_selector' => '#field-layout-settings-wrapper', 'trigger_as' => ['name' => 'field_layout_change'], ], ]; @@ -77,7 +77,7 @@ public function form(array $form, FormStateInterface $form_state) { '#attributes' => ['class' => ['js-hide']], '#ajax' => [ 'callback' => '::settingsAjax', - 'wrapper' => 'field-layout-settings-wrapper', + 'wrapper_selector' => '#field-layout-settings-wrapper', ], ]; diff --git a/core/modules/field_ui/src/Form/EntityDisplayFormBase.php b/core/modules/field_ui/src/Form/EntityDisplayFormBase.php index 9d45d8e628..9a303e9839 100644 --- a/core/modules/field_ui/src/Form/EntityDisplayFormBase.php +++ b/core/modules/field_ui/src/Form/EntityDisplayFormBase.php @@ -267,7 +267,7 @@ public function form(array $form, FormStateInterface $form_state) { '#submit' => ['::multistepSubmit'], '#ajax' => [ 'callback' => '::multistepAjax', - 'wrapper' => 'field-display-overview-wrapper', + 'wrapper_selector' => '#field-display-overview-wrapper', 'effect' => 'fade', // The button stays hidden, so we hide the Ajax spinner too. Ad-hoc // spinners will be added manually by the client-side script. @@ -379,7 +379,7 @@ protected function buildFieldRow(FieldDefinitionInterface $field_definition, arr '#submit' => ['::multistepSubmit'], '#ajax' => [ 'callback' => '::multistepAjax', - 'wrapper' => 'field-display-overview-wrapper', + 'wrapper_selector' => '#field-display-overview-wrapper', 'effect' => 'fade', ], '#field_name' => $field_name, diff --git a/core/modules/file/src/Element/ManagedFile.php b/core/modules/file/src/Element/ManagedFile.php index b26118916e..5442c084f4 100644 --- a/core/modules/file/src/Element/ManagedFile.php +++ b/core/modules/file/src/Element/ManagedFile.php @@ -230,7 +230,7 @@ public static function processManagedFile(&$element, FormStateInterface $form_st 'element_parents' => implode('/', $element['#array_parents']), ], ], - 'wrapper' => $ajax_wrapper_id, + 'wrapper_selector' => '#' . $ajax_wrapper_id, 'effect' => 'fade', 'progress' => [ 'type' => $element['#progress_indicator'], diff --git a/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php b/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php index f1da5a4b5f..cfa675257f 100644 --- a/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php +++ b/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php @@ -426,11 +426,11 @@ public static function process($element, FormStateInterface $form_state, $form) ], ]; $field_element = NestedArray::getValue($form, $parents); - $new_wrapper = $field_element['#id'] . '-ajax-wrapper'; + $new_wrapper = '#' . $field_element['#id'] . '-ajax-wrapper'; foreach (Element::children($element) as $key) { if (isset($element[$key]['#ajax'])) { $element[$key]['#ajax']['options'] = $new_options; - $element[$key]['#ajax']['wrapper'] = $new_wrapper; + $element[$key]['#ajax']['wrapper_selector'] = $new_wrapper; } } unset($element['#prefix'], $element['#suffix']); diff --git a/core/modules/layout_builder/src/Plugin/Block/FieldBlock.php b/core/modules/layout_builder/src/Plugin/Block/FieldBlock.php index 88e608f6f4..3f8bb32565 100644 --- a/core/modules/layout_builder/src/Plugin/Block/FieldBlock.php +++ b/core/modules/layout_builder/src/Plugin/Block/FieldBlock.php @@ -251,7 +251,7 @@ public function blockForm($form, FormStateInterface $form_state) { '#default_value' => $config['formatter']['type'], '#ajax' => [ 'callback' => [static::class, 'formatterSettingsAjaxCallback'], - 'wrapper' => 'formatter-settings-wrapper', + 'wrapper_selector' => '#formatter-settings-wrapper', ], ]; diff --git a/core/modules/layout_builder/tests/modules/layout_builder_test/src/Plugin/Block/TestAjaxBlock.php b/core/modules/layout_builder/tests/modules/layout_builder_test/src/Plugin/Block/TestAjaxBlock.php index 1f1eeb0d7f..440921b0b3 100644 --- a/core/modules/layout_builder/tests/modules/layout_builder_test/src/Plugin/Block/TestAjaxBlock.php +++ b/core/modules/layout_builder/tests/modules/layout_builder_test/src/Plugin/Block/TestAjaxBlock.php @@ -32,7 +32,7 @@ public function blockForm($form, FormStateInterface $form_state) { '@time' => time(), ]), '#ajax' => [ - 'wrapper' => 'test-ajax-wrapper', + 'wrapper_selector' => '#test-ajax-wrapper', 'callback' => [$this, 'ajaxCallback'], ], ]; diff --git a/core/modules/media_library/src/Form/AddFormBase.php b/core/modules/media_library/src/Form/AddFormBase.php index d6e76a5a03..55625b2e7a 100644 --- a/core/modules/media_library/src/Form/AddFormBase.php +++ b/core/modules/media_library/src/Form/AddFormBase.php @@ -272,7 +272,7 @@ protected function buildActions(array $form, FormStateInterface $form_state) { '#value' => $this->t('Save'), '#ajax' => [ 'callback' => '::updateWidget', - 'wrapper' => 'media-library-add-form-wrapper', + 'wrapper_selector' => '#media-library-add-form-wrapper', ], ], ]; diff --git a/core/modules/media_library/src/Form/FileUploadForm.php b/core/modules/media_library/src/Form/FileUploadForm.php index 8614a2e2d8..aa4a68be51 100644 --- a/core/modules/media_library/src/Form/FileUploadForm.php +++ b/core/modules/media_library/src/Form/FileUploadForm.php @@ -193,7 +193,7 @@ public function processUploadElement(array $element, FormStateInterface $form_st $element['upload_button']['#submit'] = ['::uploadButtonSubmit']; $element['upload_button']['#ajax'] = [ 'callback' => '::updateFormCallback', - 'wrapper' => 'media-library-wrapper', + 'wrapper_selector' => '#media-library-wrapper', // Add a fixed URL to post the form since AJAX forms are automatically // posted to