JavaScript inside HTML Module failed to execute correctly

Issue


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.

Workaround


Place the script in the "Page Header Tags" for the page, instead of using it in the footer, by going to:

Page Settings > Advanced Settings > Page Header Tags


Note:
If you want to edit the HTML module you will need to insert a comment tag on the script. 

 

Comments

0 comments

Please sign in to leave a comment.