New Participant

AEM 6.5 edit mode issue with javascript

Forum|Forum|2 years ago
February 6, 2024
4 replies
2844 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

kautuk_sahni

Employee

@kevin_gta 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.

Kautuk Sahni

Lokesh_Vajrala

New Participant

@kevin_gta

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.

K

Kevin_GTaAuthor

New Participant

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

Anish-Sinha

Employee

Hi @kevin_gta , 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-mode/m-p/382733

K

Kevin_GTaAuthor

New Participant

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.