Javascript Functions Running Twice

[Former Community Member]

Hi all -

I'm fairly new to AEM, and have run into an interesting issue. The component I'm building is going to be a financial application that our users fill out. (Think along the lines of filling out an application at a bank to open up a new account.)

I've got a couple of Javascript files in the component, and everything was working great yesterday. Then, at some point, all of my JS functions started running twice. I have one function that logs a "Hello World" to the console when the page is loaded, and it logs that value twice. Same for my jQuery functions - anything that fires on a click runs twice.

I'm not sure what happened to cause this. Like I said, it worked correctly for a while. Any ideas on what might be causing this?

[smacdonald2008]

Are you using ClientLibs to store the JS logic? If so - would they be loading twice somewhere?

[Former Community Member]

Yes, I'm using ClientLibs to store my JS. Here's a shot of my project below. I'm not sure if/how they could be getting loaded twice. Where would I look to see if that's the case?

[smacdonald2008]

IN which file are you specifying the reference to the clientlib. Make sure that you only have this line once:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='<NAME OF CLIENT LIB>}"

[Former Community Member]

Ok, I have that line in both my headlibs.html and footlibs.html files in my partials folder. Both files say that headlibs will only load the CSS, and that the footlibs will load the Javascript.

[Former Community Member]

Should I take one of those mentions out? I'm not sure if that's the right way to fix the issue.

[smacdonald2008]

Yes, temove one and see what happens.

[Former Community Member]

Ok, when I removed it in footlibs.html my JS no longer worked. It doesn't appear to have been loaded at all.

When I removed it in headlibs, my CSS wasn't loaded, and my JS functions still ran twice. =D

Putting both mentions back leads to CSS correct but JS functions still twice.

[viveksachdeva]

Can share sample package here?

[VeenaVikraman]

Can you share your code sample or you really need to check if you have the footlibs included in more than one place ?

Go to view source of your page and search for your clientlibs.js and see exactly how many includes do you have ?

[Former Community Member]

I checked my source code, and I have 12 mentions of clientlibs.js:

<script type="text/javascript" src="/libs/social/commons/components/ugcparbase/clientlibs.js">

<script type="text/javascript" src="/libs/granite/ui/components/endor/clientlibs.js">

<script type="text/javascript" src="/libs/cq/gui/components/projects/admin/translation/customsearch/pathbrowser/tagspicker/clientlibs.js">

<script type="text/javascript" src="/libs/cq/gui/components/common/tagspicker/clientlibs.js">

<script type="text/javascript" src="/libs/cq/gui/components/authoring/dialog/policy/clientlibs.js">

<script type="text/javascript" src="/apps/granite/emailvalidation/clientlibs.js">

<script type="text/javascript" src="/libs/mobileapps/dps/gui/components/dpstext/clientlibs.js">

<script type="text/javascript" src="/libs/commerce/gui/components/common/productpicker/clientlibs.js">

<script type="text/javascript" src="/libs/commerce/gui/components/common/collectionpicker/clientlibs.js">

<script type="text/javascript" src="/libs/commerce/gui/components/common/assetpicker/clientlibs.js">

<script type="text/javascript" src="/libs/commerce/gui/components/authoring/editor/clientlibs.js">

<script type="text/javascript" src="/libs/commerce/gui/components/authoring/assetfinder/product/clientlibs.js">

Not sure if that's working correctly?

[Former Community Member]

Here's my page.html under structure/page:

<!--/*
  Copyright 2015 Adobe Systems Incorporated
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
 
  http://www.apache.org/licenses/LICENSE-2.0
 
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/-->
<!doctype html>

<html>

  <head>

  <sly data-sly-include="partials/head.html" data-sly-unwrap/>

  <sly data-sly-include="partials/headlibs.html" data-sly-unwrap/>

  </head>

  <body>

  <sly data-sly-include="partials/main.html" data-sly-unwrap/>

  <sly data-sly-include="partials/footlibs.html" data-sly-unwrap/>

  </body>

</html>

It looks like footlibs is only included once. Is there another place I should look to see?

[VeenaVikraman]

Which is the clientlibs where your this particular JS is include ? Will it be possible to share a sample code in which this issue is replicable ?

[Former Community Member]

Unfortunately, I can't share it publicly due to internal security rules. I could email it to someone, if that's a possibility.

[smacdonald2008 · Accepted solution]

Can you try packaging up the app and all the dependencies and try to deploy to a clean install of AEM. Lets rule out an issue with the AEM instance first.

[Former Community Member]

That did the trick. I installed a new instance of AEM, and now everything works correctly. Not sure what the problem was, but it's fixed. Thanks!