Write custom JS logic that renders on closing a dialog

[goyalkritika]

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 

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

[Rohit_Utreja]

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!

[harishpvl1 · Accepted solution]

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);