Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Javascript Functions Running Twice

Avatar

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?

1 Accepted Solution

Avatar

Correct answer by
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

Avatar

Level 10

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

Avatar

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?

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

Avatar

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

Avatar

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.

Avatar

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.

Avatar

Level 10

Yes, temove one and see what happens.

Avatar

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.

Avatar

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 ?

Avatar

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?

Avatar

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?

Avatar

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 ?

Avatar

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.

Avatar

Correct answer by
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.

Avatar

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!