Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

ajaylabade
Level 1
Level 1

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
1 Accepted Solution
asutosh_jena
Correct answer by
Community Advisor
Community Advisor

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!

View solution in original post

3 Replies
Anudeep_Garnepudi
Community Advisor
Community Advisor

@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

asutosh_jena
Correct answer by
Community Advisor
Community Advisor

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!

View solution in original post

Veena_Vikram
Community Advisor
Community Advisor

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