How to call common js code from component js file? | Community
Skip to main content
December 4, 2018
Solved

How to call common js code from component js file?

  • December 4, 2018
  • 2 replies
  • 1053 views

Hi everybody!

I have a location component by path:

/ui.apps/src/main/content/jcr_root/apps/test/components/global/header/location.

Under component directory I have a clientlibs folder with following properties and structure:

[cq:ClientLibraryFolder] - jcr:primaryType

     - categories="[test.location]"

     + js.txt (nt:file)

     + js (nt:folder)

     + validation.js (nt:file)

Here is the content of the validation.js file:

(function($) {

    console.log('test');

    console.log(location.add(5, 5));

})(jQuery, location);

And I have a file called location.js (just an example) under :

/ui.apps/src/main/content/jcr_root/etc/clientlibs/test/common

directory:

[cq:ClientLibraryFolder] - jcr:primaryType

     - categories="[test.common]"

     - embed="[test.global, test.location]"

     - dependencies="[cq.shared]"

     + css.txt (nt:file)

     + js.txt (nt:file)

     + css (nt:folder)

     + js (nt:folder)

      + location.js (nt:file)

      + a bunch of js files

Example of the content of location.js file:

var location = (function ($) {

     function init() {

        // some code...
     }

     function add(a, b) {

        console.log('a=' + a);

        console.log('b=' + b);

        return a + b;

     }

     return {

         add:add

     };

})(jQuery);

location.init();

So when I open the page and check browser console I see an error like this:

test

Uncaught TypeError: Cannot read property 'add' of undefined

    at common.dd1dbfad04c7d50b4c3973155ce3fa63.js:7081

    at common.dd1dbfad04c7d50b4c3973155ce3fa63.js:7082

It's happening because code from validation.js is higher than code from location.js in the compiled common.js file.

AEM version is 6.3.2.2.

So my question:

Is it possible to call some function from js file with common code inside js file related to component? If yes, how I can achieve that?

Thanks in advance!

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 smacdonald2008

Yes it is possible to call JS functions from clientlibs that are hooked into an AEM page. In your example, make sure that the Clientlib loads properly.

You should package up your example and place onto Google drive. Looks like there is a minor thing not set properly.  But if you setup a JQuery Document Ready method-  you can call JS methods from that.

2 replies

smacdonald2008
smacdonald2008Accepted solution
Level 10
December 4, 2018

Yes it is possible to call JS functions from clientlibs that are hooked into an AEM page. In your example, make sure that the Clientlib loads properly.

You should package up your example and place onto Google drive. Looks like there is a minor thing not set properly.  But if you setup a JQuery Document Ready method-  you can call JS methods from that.

January 31, 2019

smacdonald2008  sorry for the late response and thank you! You are right. Everything works if to add jQuery Document Ready method. Thanks again!