what is the event listener that can be used after dialog content loaded.?

4
votes

Am trying to use $document.on("dialog-ready", function() { .. } for touch UI dialog customization. Where as i can see the dialog-ready event fires before the dialog content is fully loaded which gives me a unavailability of tags for traversal of dialog html.

  1. Is there any event listener that i can use for triggering a call after my dialog is fully loaded with all widgets and its values.?
  2. Is there any documentation link where i can find these event listeners apart from Adobe Experience Manager Help | Using Event Handlers in Adobe Experience Manager Touch UI Components .?
  3. Also what is the order of sequence AEM loads $document.on("dialog-ready", function() { .. } when compares with $(document).on("foundation-contentloaded", function (e) { .. }.

?

2
aemaem-6
dialog-ready is triggered after content (html) has been added to <coral-dialog-content>, I believe here is the implementation - /libs/cq/gui/components/authoring/editors/clientlibs/core/js/DialogFrame.js – awd
@VAr... Did you find any solution? I am also facing the same issue. It is surprising that 'dialog-ready' event isn't doing what it is supposed to do specially in case of tag-list. – Vinay

2 Answers

1
votes

Dialog ready is fired when a dialog is opened. Not necessarily after all values are populated. Foundation contentloaded is fired when new fields are injected into the dialog. More specifically, according to the documentation, "it should be triggered when a container is injected".

So using foundation-contentloaded is ideal when working with multifields where new fields get added much later. Also, dialog-ready will not be fired in page creation wizard. We have to use foundation-contentloaded here.

Neither of the two will guarantee that all content will be populated for us to start using their values in JavaScript. Especially when we have RTE/multifields in our dialog.

To answer your question, There are no event listeners that you can use that indicates the dialog is fully loaded. I noticed foundation-contentloaded fires before dialog-ready

Coral.commons.ready ensures initialization. Especially helpful when working with multifields and RTEs.

Coral.commons.ready(this, () => {
/*
logic to run once coral element 'this' is pointing to is initialized (initialize or _render methods are invoked)
*/
});

More information on foundation-contentloaded and Coral.commons.ready

0
votes

You can use:

$(document).on("foundation-contentloaded", function(e) {
  var container = e.target;
});

Check this link.

Here are more examples: https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html