Write custom JS logic that renders on closing a dialog | Community
Skip to main content
G
goyalkritika
Level 4
April 24, 2023
Solved

Write custom JS logic that renders on closing a dialog

  • April 24, 2023
  • 2 replies
  • 1034 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by harishpvl1

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


 

2 replies

Rohit_Utreja
Community Advisor
Rohit_UtrejaCommunity Advisor
Community Advisor
April 24, 2023

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!

    H
    harishpvl1Accepted solution
    Level 2
    April 27, 2023

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


     

      Terms & ConditionsAccessibility statement

      Loading footer...