Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Write custom JS logic that renders on closing a dialog

Avatar

Level 5

I'm writing a custom JS file for a custom component. I want that js to render when I click on 'done' on the component dialog. What should I mention in the js that specifies this requirement? The js logic is 

goyalkritika_0-1682320820897.png

To provide further details - 

1. Need to put a validation on character count of description field (type = richtext)

2. Maxlength property did not work for richtext

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi @goyalkritika 

You can use the below JS to trigger when you click on 'done' button.

(function(document, $, ns) {
"use strict";
// when dialog gets injected
$(document).on("dialog-ready foundation-contentloaded", function(e) {

var ui = $(window).adaptTo("foundation-ui");
var dialog = document.querySelector('form.cq-dialog coral-dialog-content');

$(document).on("click", ".cq-dialog-submit", function(e) {

//write your own JS logic

});
});
})(document, Granite.$, Granite.author);


 

View solution in original post

2 Replies

Avatar

Community Advisor

Hi @goyalkritika,

 

Please find below URL for your reference to implement richtext char validation.

https://sourcedcode.com/blog/aem/touch-ui/aem-richtext-max-characters-length-validation

 

This has following event covered,
// execute Jquery Validation onKeyUp
$(document).on('keyup', CONST.TARGET_GRANITE_UI, function (e) {

But you can add two more

$(document).on("dialog-loaded", function (e) {

and
$(document).on('change', '.rte-counter-validation .prefill-rte-checkbox', function (e){

 

I hope it helps!

Avatar

Correct answer by
Level 2

Hi @goyalkritika 

You can use the below JS to trigger when you click on 'done' button.

(function(document, $, ns) {
"use strict";
// when dialog gets injected
$(document).on("dialog-ready foundation-contentloaded", function(e) {

var ui = $(window).adaptTo("foundation-ui");
var dialog = document.querySelector('form.cq-dialog coral-dialog-content');

$(document).on("click", ".cq-dialog-submit", function(e) {

//write your own JS logic

});
});
})(document, Granite.$, Granite.author);