Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Javascript Functions Running Twice

John-P
Level 2
Level 2

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?

1 Accepted Solution
smacdonald2008
Correct answer by
Level 10
Level 10

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.

View solution in original post

15 Replies
smacdonald2008
Level 10
Level 10

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

John-P
Level 2
Level 2

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?

Screen Shot 2017-08-25 at 10.05.45 AM.png

smacdonald2008
Level 10
Level 10

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>}"

John-P
Level 2
Level 2

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.

John-P
Level 2
Level 2

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

John-P
Level 2
Level 2

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.

Veena_Vikram
Community Advisor
Community Advisor

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 ?

John-P
Level 2
Level 2

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?

John-P
Level 2
Level 2

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?

Veena_Vikram
Community Advisor
Community Advisor

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 ?

John-P
Level 2
Level 2

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

smacdonald2008
Correct answer by
Level 10
Level 10

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.

View solution in original post

John-P
Level 2
Level 2

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!