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

How to access a js function inside dialogs

  • February 5, 2016
  • 13 replies
  • 6283 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

Sunil_Chowdhary
New Participant
February 12, 2016

I think you have done it right, the only modification we have to do is to load clientlibs path instead of jquery file .

So instead of plugin/js/jquery-1.11.3.min.js  just use your clintlibs path which is basically based on the category name provided in clientlibrary folder.

smacdonald2008
New Participant
February 12, 2016

You use <cq:includeClientLib categories="myclientlib"/> if you do not want to use the predefined client lib folders - that are applicable to all AEM projects. Those are your only options. 

You are right - you place <cq:includeClientLib categories="myclientlib"/> in a JSP - such as a component JSP so that the clientlib loads. When you click on the dialog of a component - the JS methods are available.

If you are trying to create a dialog from site admin and the JSP is not fired and the client libs do not load, you will have to place your JS in the predefined clientlibs - as mentioned in this thread. 

New Participant
February 12, 2016

My actual solution:

function(dialog) { if(document.getElementById('jquery')==null){ //avoid the loading 2 times var path = window.location.href; var lang = path.split("/")[6]; var design="/etc/designs/myproject/"+lang+"/"; console.log("Script for siteadmin imported"); var fileref=document.createElement('script'); fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", design+"plugin/js/jquery-1.11.3.min.js"); document.head.appendChild(fileref); } else{ console.log("Script for siteadmin already imported"); } }

How can i use a clientlib inside the js code?

Sunil_Chowdhary
New Participant
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.

New Participant
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.

Tyler_Maynard
New Participant
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.

edubey
New Participant
February 9, 2016

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

New Participant
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
New Participant
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...

Kunal_Gaba_
New Participant
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.