Overview

When using JavaScript in an HTML module, the order of the script execution will be changed upon entering edit mode causing unintended results.

Prerequisites

• Access to a Page Editor or higher to a SuperUser account.

Diagnosis

A customer has added JavaScript content in an HTML module, but it's not executing correctly in EVOQ 8+.

This can be replicated by following these steps: 

1. Add a new HTML module to a page.
2. Edit the content and add the following code in the HTML input mode:
   

   <div id="target">hello world</div>

3. Access the module settings and add the following script to the module footer:
   

   <script type="text/javascript">
   $(function() {
   $('#target').text('goodbye world');
   });
   </script>

4. Save and edit the module.
   Evoq 7 behavior - The content is <div id="target">hello world</div>.
   Evoq 8+ behavior - The content is <div id="target">goodbye world</div>. 

This is a very simple example but if the javascript is more complex the result will be the same, incorrect parse of the script.

Examples:

• A slider that uses opacity transitions.
• A slider that uses dynamically generated forms. 
• A script that changes the ID attribute of the target element.
  
  

Root Cause 

The HTML pro editor that runs in EVOQ 8+ takes the content from the page and save it on exit if changed. As the script injected in the page modifies the content, the editor detects this and saves it when entering the edit mode.

Solution

Place the script in the "Page Header Tags" for the page, instead of using it in the HTML module:

1. Navigate to Content > Pages: 
   
2. Under the Page Settings, navigate to Advanced Settings > S.E.O. > Page Header Tags and Place the script into the text box area.
   
3. Click Save.