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

["Jakob Rosenlund (Jira)" <ji...@apache.org>]

Jakob Rosenlund created SLING-11116:
---------------------------------------

             Summary: JSI script doesn't always trigger in a browser with multiple components included
                 Key: SLING-11116
                 URL: https://issues.apache.org/jira/browse/SLING-11116
             Project: Sling
          Issue Type: Bug
          Components: Extensions
    Affects Versions: Dynamic Include 3.3.0
            Reporter: Jakob Rosenlund


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.
{code:java}
Page
  -> ComponentA
  -> JSI ComponentB
    -> JSI ComponentC
{code}
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.
{code:javascript}
if (xhr.status >= 200 && xhr.status < 300) {
  var elemId = document.getElementById('${uniqueId}');
  if (elemId) elemId.innerHTML = xhr.responseText;
}
{code}

innerHTML does not trigger code in <script> sections:
https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0
{quote}script elements inserted using innerHTML do not execute when they are inserted.{quote}

This can be avoided by using appendChild and wrapping the content in a div tag:
{code:javascript}
if (elemId) {
  var resultDiv = document.createElement('div');
  resultDiv.innerHTML = xhr.responseText;
  elemId.innerHTML = '';
  elemId.appendChild(resultDiv);
}
{code}



--
This message was sent by Atlassian Jira
(v8.20.1#820001)