Hi All, I was trying to call js on dialog ready with $document.on("dialog-ready", function(){ alert('Its not coming here on dialog open');}

Avatar

Avatar

ajaylabade

Avatar

ajaylabade

ajaylabade

19-03-2021

Hi All, I was trying to call js on dialog ready with $document.on("dialog-ready", function(){ alert('Its not coming here on dialog open');}

dialog-ready not working

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

asutosh_j3

Avatar

asutosh_j3

asutosh_j3

19-03-2021

Hi @ajaylabade 

 

If you want to define styling and behavior for your component, you can create a dedicated client library that defines your custom CSS/LESS and JS.

  • To have your client library loaded solely for your component dialog (i.e. it will not be loaded for another component) you need to set the property extraClientlibs of your dialog to the category name of the client library you have just created. This is advisable if your client library is quite big and/or your field is specific to that dialog and will not be needed in other dialogs.
  • To have your client library loaded for all dialogs, set the category property of your client library to cq.authoring.dialog. This is the category name of the client library that is included by default when rendering all dialogs. You want to do that if you client library is small and/or your field is generic and could be reused in other dialogs.

See the below code:

(function ($, $document) {
"use strict";
$document.on("dialog-ready", function() {
alert('Its coming here on dialog open');
});
})($, $(document));

 

Please see the screenshot below:

asutosh_j3_0-1616220696671.png

asutosh_j3_1-1616220722184.png

 

Hope this helps!

Thanks!

Answers (2)

Answers (2)

Avatar

Avatar

Veena_Vikram

MVP

Avatar

Veena_Vikram

MVP

Veena_Vikram
MVP

20-03-2021

@ajaylabade I think if you follow @asutosh_j3 steps you will be able to get this work 

Avatar

Avatar

Anudeep_Garnepudi

MVP

Avatar

Anudeep_Garnepudi

MVP

Anudeep_Garnepudi
MVP

19-03-2021

@ajaylabade 

End parentheses is missing.

$(document).on("dialog-ready", function() {
    alert("Ready..!!");
});

 

Reference: https://adapttoaem.blogspot.com/2021/02/aem-hideshow-touch-ui-dialog-fields.html