Ajax Error: Preview link has no id attribute when used with Media Library

Created on 31 July 2024, 5 months ago

Problem/Motivation

The preview link, which triggers an Ajax call, fails to open the modal with the image styles. This issue occurs because the updatePreviewLink method cannot update the preview link.

Drupal.ajax.instances.forEach(function (instance, index) {
    if (instance && $(instance.element).data("selector") === dataSelector) {
        const href = $(instance.selector).attr("href");
        Drupal.ajax.instances[index].url = href;
        Drupal.ajax.instances[index].options.url = href;
    }
});

In the code above, the "instance.selector" should reference the ID attribute of the link preview tag. However, in the Media Library, it is null. This happens because the link lacks an ID attribute, resulting in instance.selector being null.

Steps to Reproduce

- Enable the focal point widget on the file field in the Media Form display.
Test on the Media page:
- Upload a new media item at /admin/media (should work as expected).
Test on a Node that has a field media relation:
- Upload a new media item and click on the preview link (should work as expected).
- Select a new focal point value and click on the preview link again (the Ajax call is posted to the same page).

demo

Proposed Resolution

A temporary solution is to replace "instance.selector" with "instance.element", which works correctly. However, this is not ideal since the ID attribute should be present in all cases.

Remaining Tasks

Investigate and determine why the ID attribute is missing in the preview link in the Media Library display.

🐛 Bug report
Status

Active

Version

2.1

Component

Media Integration

Created by

🇧🇷Brazil andre.bonon

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024