


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
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Sign in to like this content
Total Likes
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);
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!
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);