[SLING-11116] JSI script doesn't always trigger in a browser with multiple components included

• Type: Bug
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Affects Version/s: Dynamic Include 3.3.0
• Component/s: Extensions
• Assignee: Unassigned
• Reporter: Jakob Rosenlund
• Created: 03/Feb/22 13:22
• Updated: 14/Apr/23 19:24

Description

Using Javascript includes (JSI) in Sling Dynamic Include 3.3.0 on a page with multiple levels of inclusions the components deeper in the tree does not always get fetched and included into the DOM.

Page
  -> ComponentA
  -> JSI ComponentB
    -> JSI ComponentC

ComponentC may not always be fetched and included in the DOM. This is an issue in cases where authors add multiple components, defined in the SDI include-filter.config.resource-types configuration, inside each other.

The cause seem to be the usage of innerHTML to replace content in the DOM.

if (xhr.status >= 200 && xhr.status < 300) {
  var elemId = document.getElementById('${uniqueId}');
  if (elemId) elemId.innerHTML = xhr.responseText;
}

innerHTML does not trigger code in <script> sections:
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

script elements inserted using innerHTML do not execute when they are inserted.

This can be avoided by using appendChild and wrapping the content in a div tag:

if (elemId) {
  var resultDiv = document.createElement('div');
  resultDiv.innerHTML = xhr.responseText;
  elemId.innerHTML = '';
  elemId.appendChild(resultDiv);
}

Issue Links

• links to: GitHub Pull Request #24
• links to: GitHub Pull Request #24