How to call common js code from component js file?

[sergeyl21046686]

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!

[smacdonald2008 · Accepted solution]

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.

[sergeyl21046686]

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