Replace #ID selectors for data-drupal-selector attribute

Still very relevent

Here occurrences that I found.
If I'm not on the wrong track, I'll start creating a patch

core/modules/node/content_types.js:
32:vals.push($(".form-item-language-configuration-langcode select option:selected", context).text());

core/modules/locale/locale.admin.js:
10:var $form = $("#locale-translate-edit-form").once('localetranslatedirty');
34:var $form = $("#locale-translate-edit-form").removeOnce('localetranslatedirty');

core/modules/views_ui/js/ajax.js:
67:$("#views-tabset a").once('views-ajax').on('click', function () {
72:$("#views-live-preview #preview-display-id").val(display_id);

core/misc/vertical-tabs.js:
105:$(".vertical-tabs__pane :input:visible:enabled").eq(0).trigger('focus');

Updated IS explaining the situation.

Attaching a patch fixing id issues in the block module as an example.

Triggering test bot :)

Isn't that critical then?

changed js files in color module, not sure how to add code related to this in .php files.
@nod_ can you provide some help snippet regarding how to update same in .php files ?
Added patch and interdiff.

For information I'm waiting on feedback on #1305882: drupal_html_id() considered harmful; remove ajax_html_ids to use GET (not POST) AJAX requests to know whether this issue is just a normal/major task or a critical one. While waiting make sure you don't work on the parts already rolled in the other patch.

For the color module, when there is an id with "edit-" it means it's a form element and there is most likely a name attribute you can use to select it (no need for data-drupal-selector) all the time. I'd say try to check which element is selected and use it's name to select it.

Let's wait on #1305882: drupal_html_id() considered harmful; remove ajax_html_ids to use GET (not POST) AJAX requests to be resolved, it might introduce some very handy code to facilitate this conversion.

Nod_, Thank you for your instructions. Let's work on if after the above issue is resolved.

#1305882: drupal_html_id() considered harmful; remove ajax_html_ids to use GET (not POST) AJAX requests landed.

Little Reroll

Requeued for testing because I can't seem to reproduce the exception locally.

> Toolbar
> Tour
> SimpleTest

working on the Language task at DrupalConBarcelona. Being mentored by Justafish.

ran out of time, wasn't able to find anything that needed changing for the Language module (but I had to jump off before able to say for certain that nothing needs to get changed).

Reset to Needs Review, as I don't know if there is something to do there.

Language module had 1 id selector that needed to be replaced.

NR for bot.

Just to confirm, as per comment #18, I am working on this at the sprinting session @DrupalCon Barcelona. My mentor is jp_stacey. I am working based on patch in #14.

Alright. I've finished my work on:
> Toolbar
> Tour
> SimpleTest

The patch included starts from the patch from comment #14. See #24 for a bit more info.

This DOES NOT include Jelle_S's work. So #23 is not included!

I've reviewed both the failed-patch-log and my code, and I can't seem to find a good reason as to why my patch failed. So I'm resubmitting this for testing. /em crosses fingers

This patch is OK for me.

Merged the two patch and remove some extra changes that are not needed. A bunch of things making this patch easier got in.

The fact that data-drupal-selector attribute is automatically added for every element that has an id helps a lot. Means that this patch doesn't need to change PHP to add things it can just reuse available markup.

I've omitted the changes to #gradient-X selectors since we don't use them anymore. I'll open an issue to get rid of them (instead we use css gradients).

Needs review. Patch to be ported.

Working on porting the patch

Is there anything pending ?

We will take this issue on Drupal Mumbai Code sprint.

I could apply the patch, so no reroll is needed.

should we postpone it until more JS test cases covered in CORE? And I think we better to do it module-by-module instead.

this project may help Core & Contributed modules for this transform.
https://github.com/facebook/jscodeshift

Working on CKEditor at DrupalCon Vienna 2017 #drupalconeur mentor drpal

The related issue:
https://www.drupal.org/node/2912706

issue fixed for 8.6.x

I'm working on this for #drupalcon2020. Feel free to ping me on Slack.

I'm working to check if the list of modules to fix are update. I'm working for DrupalCon2020

I searched on the core modules for JS files with references by '#' and updated the list of modules to update.

I found some cases in which the '#' is used with a concatenation, like these codes below:

core/modules/ckeditor/js/ckeditor.off-canvas-css-reset.js:
  10:     var selectorPrefix = '#drupal-off-canvas ';

core/modules/ckeditor/js/views/ControllerView.es6.js:
  185:         CKEDITOR.inline($(`#${hiddenCKEditorID}`).get(0), CKEditorConfig);

core/modules/editor/js/editor.es6.js:
  20:     return $(`#${fieldId}`).get(0);

core/modules/image/js/editors/image.js:
  161:       var $toolgroup = $("#".concat(fieldModel.toolbarView.getMainWysiwygToolgroupId()));

Are these cases need to update following the same rule?

I would leave those 4 alone for now, they might be tricky.

Sometimes, I'm confused what we're trying to do.. or which one is correct usage

I've seen smiliar changes and commits before I asked here...

https://www.drupal.org/project/drupal/issues/3084916

Do we really needed both HTML Class & data attribute at the same time?

We even has another `js-prefix`...

So that's a chance we have 3 same things.....

We only need ONE I believed.

Also related to https://www.drupal.org/node/2503277.

I am removing the 'Novice' tag because what task someone new to Drupal contribution is not clearly defined.

The IS said that this is blocking #1305882: drupal_html_id() considered harmful; remove ajax_html_ids to use GET (not POST) AJAX requests, but that issue is fixed. So I'm striking that note in the IS.

Do we really needed both HTML Class & data attribute at the same time?

We even has another `js-prefix`...

So that's a chance we have 3 same things.....

We only need ONE I believed.

To me, it appears that this is about HTML id, not class.

Making this change will probably be very useful, maybe critical, if we change to always-random id attributes in #1852090: Cached render elements can have duplicate HTML IDs.

If that comes to pass, we'll probably want to also change a lot of CSS and tests to use data-drupal-selector.