evaluate script tags when replacing html (#3826)

Author: johrstrom

apps/dashboard/app/javascript/turbo_shim.js

@@ -5,6 +5,8 @@
   this shim until we enable it.
 */
 
+import { setInnerHTML } from './utils';
+
 export function replaceHTML(id, html) {
   const ele = document.getElementById(id);
 
@@ -16,7 +18,7 @@ export function replaceHTML(id, html) {
     const newHTML = tmp.querySelector('template').innerHTML;
     tmp.remove();
 
-    ele.innerHTML = newHTML;
+    setInnerHTML(ele, newHTML);
   }
 }
 

apps/dashboard/app/javascript/utils.js

@@ -80,3 +80,25 @@ export function openLinkInJs(event) {
     mainDiv.prepend(alertDiv);
   }
 }
+
+// Helper method to set an element's innerHTML property
+// and evaluate any <script> tags that may exist within it.
+// Just setting innerHTML of an html element does not re-evaluate
+// the <script> tags that it may hold.
+export function setInnerHTML(element, html) {
+  element.innerHTML = html;
+  const scripts = Array.from(element.querySelectorAll("script"));
+
+  scripts.forEach(currentElement => {
+    const newElement = document.createElement("script");
+
+    Array.from(currentElement.attributes).forEach( attr => {
+      newElement.setAttribute(attr.name, attr.value);
+    });
+
+    const scriptText = document.createTextNode(currentElement.innerHTML);
+    newElement.appendChild(scriptText);
+
+    currentElement.parentNode.replaceChild(newElement, currentElement);
+  });
+}