rails views: start removing jQuery

app/assets/javascripts/util.js

@@ -208,6 +208,26 @@ function getParentByClassName(element, classNames) {
     return null;
 }
 
+/**
+ * When setting innerHTML, code inside the <script> tag doesn't get executed.
+ * This function solves that problem.
+ */
+function setInnerHTML(el, html) {
+    el.innerHTML = html;
+    Array.from(el.querySelectorAll("script")).forEach( oldScriptEl => {
+        const newScriptEl = document.createElement("script");
+        Array.from(oldScriptEl.attributes).forEach( attr => {
+            newScriptEl.setAttribute(attr.name, attr.value);
+        });
+        const scriptText = document.createTextNode(oldScriptEl.innerHTML);
+        newScriptEl.appendChild(scriptText);
+        oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
+    });
+}
+
+// insert `cached` function here after move to typescript
+// the function is currently in `app/assets/javascripts/mark.ts`
+
 export {
     createDelayer,
     delay,
@@ -227,4 +247,5 @@ export {
     initDatePicker,
     ready,
     getParentByClassName,
+    setInnerHTML,
 };

app/javascript/packs/application_pack.js

@@ -32,7 +32,7 @@ window.bootstrap = bootstrap;
 import { Drawer } from "drawer";
 import { Toast } from "toast";
 import { Notification } from "notification";
-import { checkTimeZone, checkIframe, initCSRF, initTooltips, ready } from "util.js";
+import { checkTimeZone, checkIframe, initCSRF, initTooltips, ready, setInnerHTML } from "util.js";
 import { initClipboard } from "copy";
 import { FaviconManager } from "favicon";
 import { themeState } from "state/Theme";
@@ -64,6 +64,7 @@ dodona.Toast = Toast;
 dodona.Notification = Notification;
 dodona.initTooltips = initTooltips;
 dodona.checkIframe = checkIframe;
+dodona.setInnerHTML = setInnerHTML;
 dodona.setTheme = theme => themeState.selectedTheme = theme;
 dodona.setUserId = userId => userState.id = userId;
 dodona.ready = ready;

app/views/activities/available.js.erb

@@ -1,2 +1,2 @@
-$("#activities-table-wrapper").html("<%= escape_javascript(render partial: 'series_activities_add_table', locals: {activities: @activities, series: @series}) %>");
+dodona.setInnerHTML(document.querySelector("#activities-table-wrapper"), "<%= escape_javascript(render partial: 'series_activities_add_table', locals: {activities: @activities, series: @series}) %>");
 dodona.seriesEditActivitiesLoaded();

app/views/activities/index.js.erb

@@ -1 +1 @@
-$("#activities-table-wrapper").html("<%= escape_javascript(render partial: 'activities_table', locals: {activities: @activities}) %>");
+dodona.setInnerHTML(document.querySelector("#activities-table-wrapper"),"<%= escape_javascript(render partial: 'activities_table', locals: {activities: @activities}) %>");

app/views/activities/read.js.erb

@@ -1 +1 @@
-$("#content_page_read_action").html("<%= escape_javascript(render partial: 'activities/content_page_read_button', locals: {activity: activity, course: course, read_state: read_state, user: user}) %>");
+dodona.setInnerHTML(document.querySelector("#content_page_read_action"), "<%= escape_javascript(render partial: 'activities/content_page_read_button', locals: {activity: activity, course: course, read_state: read_state, user: user}) %>");