How to access a js function inside dialogs

[samuel786431]

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

[edubey]

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_ · Accepted solution]

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

[samuel786431]

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_]

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]

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

[samuel786431]

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]

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

[Tyler_Maynard]

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.

[samuel786431]

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]

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.

[samuel786431]

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?

[smacdonald2008]

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. 

[Sunil_Chowdhary]

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.