Problem/Motivation

DOM may be updated by various front end, back end or other ajax actions. Currently when an element with the class ".use-ajax" is added after the initial page load it usually isn't initialised. Although it might work for the admin user as the element binding could occur after the inistial DOM update (such as with VueJS or ReactJS).

To reproduce, create a dialog link with the class attribute use-ajax and data-dialog-type="modal", linking to another page. This should work.

Next, dynamically add another link, using either a JS front end or developer tools. Clicking on the link will take you to the page instead of opening a modal.

Proposed resolution

Find a way to delegate the event to a parent element or listen for dynamic updates.

The attached patch is non-compliant, and it doesn't include ES6 changes, but it does show one way to listen for dynamic updates.

CommentFileSizeAuthor
#25 2997668-19-d10.1.x.updated.patch2.51 KBa.kovrigin
#19 2997668-19-d10.1.x.patch2.5 KBagarzola
#18 2997668-18-d10.0.x.patch2.12 KByauheni
#16 ajax_binding_should_apply_to_dynamic_elements-2997668-16.patch4.14 KBsidgrafix
#13 interdiff_12-13.txt1.09 KBranjith_kumar_k_u
#13 2997668-13.patch3.79 KBranjith_kumar_k_u
#12 2997668-12.patch4.11 KBgauravvvv
#12 interdiff-2997668-10_12.txt545 bytesgauravvvv
#10 ajax_binding_should_apply_to_dynamic_elements-2997668-10.patch4.12 KBqzmenko
#6 ajax_binding_should_apply_to_dynamic_elements-2997668-6.patch2 KBkiseleva.t
ajax_binding_should_apply_to_dynamic_elements-0.patch1.63 KBimclean

Comments

imclean created an issue. See original summary.

Status: Needs review » Needs work

The last submitted patch, ajax_binding_should_apply_to_dynamic_elements-0.patch, failed testing. View results

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

yivanov’s picture

yivanov commented

I tested your patch and it works well for Drupal Core 8.8.2 , but still as you mentioned - it needs more work.

I found another workaround here, until we have a Drupal core solution - https://stackoverflow.com/questions/59085793/drupal-8-ajax-modal-not-wor...

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

kiseleva.t’s picture

kiseleva.t commented
Status: Needs work » Needs review
StatusFileSize
new ajax_binding_should_apply_to_dynamic_elements-2997668-6.patch2 KB

Updated patch for 9.3.x

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

qzmenko’s picture

qzmenko
Primary language Russian
Location Novosibirsk
commented
Status: Needs review » Needs work

Patch #6 works for me, thanks.
But changes also should be applied to file /core/misc/ajax.es6.js

Version: 9.2.x-dev » 9.3.x-dev
qzmenko’s picture

qzmenko
Primary language Russian
Location Novosibirsk
commented
StatusFileSize
new ajax_binding_should_apply_to_dynamic_elements-2997668-10.patch4.12 KB

Reroll for core 9.3.x

qzmenko’s picture

qzmenko
Primary language Russian
Location Novosibirsk
commented
Status: Needs work » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new interdiff-2997668-10_12.txt545 bytes
new 2997668-12.patch4.11 KB

Fixed custom command failed, Attached interdiff for #10. Please review.

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new 2997668-13.patch3.79 KB
new interdiff_12-13.txt1.09 KB

Status: Needs review » Needs work

The last submitted patch, 13: 2997668-13.patch, failed testing. View results

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

sidgrafix’s picture

sidgrafix commented
StatusFileSize
new ajax_binding_should_apply_to_dynamic_elements-2997668-16.patch4.14 KB

Patch for Drupal 9.5 for anyone using this (patch-13 wouldn't apply after core update) do to number of lines in files have changed

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.9 was released on December 7, 2022 and is the final full bugfix release for the Drupal 9.4.x series. Drupal 9.4.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.5.x-dev branch from now on, and new development or disruptive changes should be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

yauheni’s picture

yauheni commented
StatusFileSize
new 2997668-18-d10.0.x.patch2.12 KB

Reroll for core 10.0.x

agarzola’s picture

agarzola commented
Status: Needs work » Needs review
StatusFileSize
new 2997668-19-d10.1.x.patch2.5 KB

Providing a new patch for 10.1.x that uses MutationObserver, since MutationEvent is deprecated.

Status: Needs review » Needs work

The last submitted patch, 19: 2997668-19-d10.1.x.patch, failed testing. View results

markdorison’s picture

markdorison
he/him
commented
Version: 9.5.x-dev » 10.1.x-dev
yfiervil’s picture

yfiervil commented

One solution is to manage this directly where the DOM is updated.
For exemple on Vue, you can just force the bind with :

onMounted(() => {
  Drupal.ajax.bindAjaxLinks()
})

Did the core really need to manage this case ?

agarzola’s picture

agarzola commented

Did the core really need to manage this case ?

Since loading content dynamically via Ajax is functionality offered by core and it is a reasonable expectation for dynamically-loaded content to itself contain dynamic links within, then it stands to reason that core should handle that use case.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

a.kovrigin’s picture

a.kovrigin commented
StatusFileSize
new 2997668-19-d10.1.x.updated.patch2.51 KB

I'm facing an issue when observer does nothing when no DOM changes happens on page load.

Usage of MutationObserver is a great option here, but shouldn't bindAjaxLinks() be called anyway, so we'll have processed .use-ajax links at the page loaded stage and on DOM mutation level?

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.