How to access a js function inside dialogs | Community
Skip to main content
Level 4
February 5, 2016
Solved

How to access a js function inside dialogs

  • February 5, 2016
  • 13 replies
  • 6290 views

Hi, 

i need to make a shared function with javascript. If i import the file inside the header of my page, the same function is not visible inside a dialog. It seems to be a different scope.

Is there a way to do it?

Thanks

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 Kunal_Gaba_

You shouldn't be including javascript on the pages for dialog or any authoring related customizations. Rather you should create a JS client library and define category property of the client library node to "cq.widgets" for classic UI and "cq.authoring.dialog" for touch UI. 

Examples-

For touch UI - /libs/cq/gui/components/authoring/dialog/image/clientlibs/image

13 replies

edubey
Level 10
February 5, 2016

You are importing a piece of JS code in header of your page ?

how are trying to access the JS code in dialog?

Kunal_Gaba_
Kunal_Gaba_Accepted solution
February 5, 2016

You shouldn't be including javascript on the pages for dialog or any authoring related customizations. Rather you should create a JS client library and define category property of the client library node to "cq.widgets" for classic UI and "cq.authoring.dialog" for touch UI. 

Examples-

For touch UI - /libs/cq/gui/components/authoring/dialog/image/clientlibs/image

Level 4
February 5, 2016

Thanks kunal.

If i add the category cq.widgets the libraries are automatically charged during the starting of cq, right?

So this function will be available inside all of my projects? I need this function visible for only my current project.

Kunal_Gaba_
February 5, 2016

You can add a condition in your JS function to not to execute if the path is not specific to the project. CQ.WCM.getPagePath() will give you the path of the page in the javascript function. 

edubey
Level 10
February 5, 2016

use cq:widgets only if its part of aem library, else if that JS code is part of your project code then use your own clientlib and make sure you load this clientlib only in project where you need this...

Level 4
February 9, 2016

I know only this way to load a clientlib: <cq:includeClientLib categories="myclientlib"/>

My dialog can be accessed under the siteadmin and the code inside the jsp isn't executed.

I can't use the cq:widgets because this code must be launched only in one project (i can't use a condition inside the function due to a project constrain)

edubey
Level 10
February 9, 2016

Can you give a brief of what you are trying to achieve or implement

Tyler_Maynard
Level 4
February 9, 2016

Are you working with TouchUI or Classic?

I have specific javascript for dialogs in my touchUI interface with the extraClientLibs property in my _cq_dialog node.

This is how I have added JavaScript to only specific dialogs. If the javascript function your trying to access is declared in another clientlib, then that clientlib should have the category cq.authoring.dialog/cq.widgets as mentioned above.

Level 4
February 12, 2016

Thanks Tyler, i'm working with the Classic UI.

The property extraClientLibs is exactly what i need, therefore a method to load js and css during the loading of the dialog.

But i can't find information about it and seems that doesn't work. If i access the dialog across the sidekick or across the siteadmin i can't see any trace about the static resources.

Sunil_Chowdhary
Level 2
February 12, 2016

Looks like solution to problem suggested is to use listener or dialog event to load clienlibs/js+css.

+ Points:- Not dependent on page jsp or siteadmin or site.

              The js will get loaded  before the dialog opens and gets rendered.

- Points:-The js events may not bind properly but it basically depends on js library included.