AEM 6.5 edit mode issue with javascript

[kevingtan]

Hi all,

Many of our pages have our own javascript and third party library, such as jQuery. It looks like AEM disables those scripts when is in edit mode. When clicking on the "Preview", most of functionalities will come back, but not all. Then we will have to get rid of the "editor.html" selector in the URL in order to fully load the scripts. Is there any way to prevent AEM disabling the javascript?

A good example is that when using jQuery Cycle2 for slideshows, the sling model loads all the images from the backend, but AEM disables Cycle2's features so that all image heights are added up, making the page's height huge. Testing wcmmode doesn't work in this case.

Thanks!

-kt

[SureshDhulipudi]

How are you adding javascript third party library?

I.e as an external source url or added in AEM client library, so that AEM can minify it?

did you try copying the library source in internal file?

[kevingtan]

Yes, we downloaded all necessary files in our folder, then minify them and compile all files using js.txt.

[Anish-Sinha]

Hi @kevingtan , check if any of those client libraries/scripts are included on the page under this condition

${!wcmmode.edit} or ${wcmmode.disabled}

check this reference link: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-sightly-check-if-edit-...

[kevingtan]

The javascript is added without any condition. By the way, ${wcmmode.edit} and ${wcmmode.preview} don't make much difference when toggling the mode using the top right buttons. One has to reload the page in order to see the difference.

[Lokesh_Vajrala]

@kevingtan  

Have you checked in the browser network tab weather the custom clientlibs - Cycle2 are loading or not? 

When in the Editor, AEM loads the editor related clientlibs to show the authoring tools - drag and drop and component editor toolbar features. These editor features related events may have taken precedence over the custom clientlib events. 

You may have to write custom code based on the editor events to apply the Cycle2's features on top of the Preview.  

[kevingtan]

It's loaded. My understanding is that when it's in edit mode, the page is loaded within an <iframe>. I don't know if that's the reason the javascript is disabled within iframe.

As shown above, the page is loaded within the <iframe> in edit mode.

Thanks,

-kt

[kevingtan]

We have waypoint in our project, that doesn't seem to work using iframe. A detail discussion can be found here.

https://forums.tumult.com/t/jquery-waypoints-scroll-animations-in-iframes-dont-work/11023

[kautuk_sahni]

@kevingtan Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.