How do I add a global javascript and css to a whole page that uses a predefined template in Adobe CQ5?

[Oliverblaster]

I want to Send data via AJax call to serlvet, the serlvet will return some result based to which I will redirect to a page. So where do I add this global .js file i.e the file that contains the AJAX call. PLEASE NOTE I'M USING PREDEFINED FORM COMPONENT AND A PREDEFINED TEMPLATE(Form Template) SO I CAN'T DO STUFF LIKE <cq: includeClientLibs> , as I don't have source code of component(form template).

I found a link where we add a global JS but I don't have this option in my CQ5 instance.

So Weird.http://www.sfu.ca/itservices/cms/howto/advanced/style-a-page/customjavascript.html

[img]weird.PNG[/img]

[rcotta]

Hi,

I was about to post this question here in the forum, as I have the same problem as you, but for a distinct reason: I need to include some Javascript files that varies accordingly to the **page**, and not by templates.

For example, I have page-1 using file1.js, page-2 using file2.js, but both use template-A (and this does not let me use the client library).

What I did is to place my files inside /etc/clientlibs/my-project/my-custom-static-files-folder/file1.js, although my-custom-static-files-folder is not actually a client library, but just a folder to place those files.

And on the pages, I include the reference to the file placed inside the folder, like <script src="/etc/clientlibs/my-project/my-custom-static-files-folder/file1.js" ...>.

The bad part of this approach is that I can't take advantage of AEM's minification capabilities for those files.

If someone has a better approach, please let us know!

[smacdonald2008]

The typical way is to use clientlibs and  <cq: includeClientLibs> to include JS libs and CSS. I have always used this standard way. However - i will research a way to do this without using clientlibs. 

What version of CQ are you using? 

[Oliverblaster]

I would like to know how to do this in CQ 5.5 and 5.6

[Paul_McMahon · Accepted solution]

My preferred approach for this type of requirement (page specific CSS/JS) is to do the following:

1. Have a location in your application to store these page specific files - so in your example /etc/clientlibs/my-project/my-page-specific-libs
2. Then for each file or set of files create a client library - so for example /etc/clientlibs/my-project/my-page-specific-libs/file1-lib - and make it an actual client lib.
3. Add a multi-value property to your template's page property - have it be a pathfield that starts at /etc/clientlibs/my-project/my-page-specific-libs and has a predicate to limit selections to client libraries. 
4. In your head.jsp check this property and if there are value iterate over them and do a <cq: includeClientLibs> for the client lib. You will have to fetch the category from the node selected but that's doable. You could also adopt a naming convention that said the category will always be the same as the node name in which case you could avoid doing the repository read. 

Now you get the benefits of the client library framework but it can still be page specific. 

[justin_at_adobe]

Hi,

If the page component includes client libraries by category, you can create a new client library with the *same* category as an existing client library. You must have the source of the components. Aren't they just in JSP scripts in /apps/<something> ?

Justin