rails views: start removing jQuery

app/assets/javascripts/utilities.ts

@@ -215,6 +215,23 @@ function getParentByClassName(element: Element, classNames: string): Element {
     return null;
 }
 
+/**
+ * When setting innerHTML, code inside the <script> tag doesn't get executed.
+ * This function solves that problem.
+ */
+function setHTMLExecuteScripts(el: Element, html: string): void {
+    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);
+    });
+}
+
 export {
     createDelayer,
     delay,
@@ -233,4 +250,5 @@ export {
     initDatePicker,
     ready,
     getParentByClassName,
+    setHTMLExecuteScripts,
 };

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, initTooltips, ready } from "utilities.ts";
+import { checkTimeZone, checkIframe, initTooltips, ready, setHTMLExecuteScripts } from "utilities.ts";
 import { initClipboard } from "copy";
 import { FaviconManager } from "favicon";
 import { themeState } from "state/Theme";
@@ -60,6 +60,7 @@ dodona.Toast = Toast;
 dodona.Notification = Notification;
 dodona.initTooltips = initTooltips;
 dodona.checkIframe = checkIframe;
+dodona.setHTMLExecuteScripts = setHTMLExecuteScripts;
 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.setHTMLExecuteScripts(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.setHTMLExecuteScripts(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.setHTMLExecuteScripts(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}) %>");

app/views/api_tokens/create.js.erb

@@ -1,4 +1,4 @@
-$("#token-table-placeholder").html("<%= escape_javascript(render partial: 'table', locals: {user: @user}) %>");
-$("#new-token-form").html("<%= escape_javascript(render partial: 'form', locals: {user: @user}) %>");
-$("#fresh-token").html("<%= escape_javascript(render partial: 'show', locals: {token: new_token}) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#token-table-placeholder"), "<%= escape_javascript(render partial: 'table', locals: {user: @user}) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#new-token-form"), "<%= escape_javascript(render partial: 'form', locals: {user: @user}) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#fresh-token"), "<%= escape_javascript(render partial: 'show', locals: {token: new_token}) %>");
 new dodona.Toast("<%= escape_javascript toast %>");

app/views/api_tokens/delete.js.erb

@@ -1,2 +1,2 @@
-$("#token-table-placeholder").html("<%= escape_javascript(render partial: 'table', locals: {user: @user}) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#token-table-placeholder"), "<%= escape_javascript(render partial: 'table', locals: {user: @user}) %>");
 new dodona.Toast("<%= escape_javascript toast %>");

app/views/course_members/index.js.erb

@@ -1,2 +1,2 @@
-$("#users-table-wrapper").html("<%= escape_javascript(render partial: 'members_table', locals: {course_memberships: @course_memberships}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'members_table', locals: {course_memberships: @course_memberships}) %>")
 dodona.ready.then(dodona.initTooltips);

app/views/courses/index.js.erb

@@ -1,13 +1,13 @@
 <% if @repository %>
-$("#courses-table-wrapper").html("<%= escape_javascript(render partial: 'courses/repo_courses_table', locals: {courses: @courses}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#courses-table-wrapper"), "<%= escape_javascript(render partial: 'courses/repo_courses_table', locals: {courses: @courses}) %>")
 if (dodona.repositoryCoursesLoaded) {
     dodona.repositoryCoursesLoaded();
 }
 <% elsif @copy_courses %>
-$("#courses-table-wrapper").html("<%= escape_javascript(render partial: 'courses/copy_courses_table', locals: {courses: @courses}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#courses-table-wrapper"), "<%= escape_javascript(render partial: 'courses/copy_courses_table', locals: {courses: @courses}) %>")
 if (dodona.copyCoursesLoaded) {
     dodona.copyCoursesLoaded();
 }
 <% else %>
-$("#courses-table-wrapper").html("<%= escape_javascript(render partial: 'courses/courses_table', locals: {courses: @courses}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#courses-table-wrapper"), "<%= escape_javascript(render partial: 'courses/courses_table', locals: {courses: @courses}) %>")
 <% end %>

app/views/courses/new.js.erb

@@ -1,4 +1,4 @@
-$("#course-form-wrapper").html("<%= escape_javascript(render partial: 'form', locals: {course: @course, copy_options: @copy_options}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#course-form-wrapper"), "<%= escape_javascript(render partial: 'form', locals: {course: @course, copy_options: @copy_options}) %>")
 if (dodona.courseFormLoaded) {
     dodona.courseFormLoaded();
 }

app/views/courses/scoresheet.js.erb

@@ -1 +1 @@
-$("#scoresheet-table-wrapper").html("<%= escape_javascript(render partial: 'scoresheet_table', locals: {course: @course, series: @series, users: @users, hash: @hash, histogram: @histogram, total_activity_count: @total_activity_count, total_by_user: @total_by_user, total_histogram: @total_histogram}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#scoresheet-table-wrapper"), "<%= escape_javascript(render partial: 'scoresheet_table', locals: {course: @course, series: @series, users: @users, hash: @hash, histogram: @histogram, total_activity_count: @total_activity_count, total_by_user: @total_by_user, total_histogram: @total_histogram}) %>")

app/views/institutions/index.js.erb

@@ -1 +1 @@
-$("#institution-table-wrapper").html("<%= escape_javascript(render partial: 'institutions/institution_table', locals: {institutions: @institutions, pagination_opts: @pagination_opts }) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#institution-table-wrapper"), "<%= escape_javascript(render partial: 'institutions/institution_table', locals: {institutions: @institutions, pagination_opts: @pagination_opts }) %>");

app/views/institutions/merge.js.erb

@@ -1,2 +1,2 @@
-$("#institution-table-wrapper").html("<%= escape_javascript render(partial: 'merge_table', locals: {institutions: @institutions, merge_target: @institution, pagination_opts: @pagination_opts}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#institution-table-wrapper"), "<%= escape_javascript render(partial: 'merge_table', locals: {institutions: @institutions, merge_target: @institution, pagination_opts: @pagination_opts}) %>");
 dodona.initInstitutionSelectionTable(<%= @institution.id %>);

app/views/labels/index.js.erb

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

app/views/series/scoresheet.js.erb

@@ -1 +1 @@
-$("#scoresheet-table-wrapper").html("<%= escape_javascript(render partial: 'scoresheet_table', locals: {course: @course, series: @series, activities: @activities, users: @users, submissions: @submissions, read_states: @read_states, statuses: @statuses, read_state_counts: @read_state_counts, submission_counts: @submission_counts, summary_by_user: @summary_by_user, total: @total}) %>")
+dodona.setHTMLExecuteScripts(document.querySelector("#scoresheet-table-wrapper"), "<%= escape_javascript(render partial: 'scoresheet_table', locals: {course: @course, series: @series, activities: @activities, users: @users, submissions: @submissions, read_states: @read_states, statuses: @statuses, read_state_counts: @read_state_counts, submission_counts: @submission_counts, summary_by_user: @summary_by_user, total: @total}) %>");

app/views/submissions/index.js.erb

@@ -1,4 +1,4 @@
-$("#submissions-table-wrapper").html("<%= escape_javascript(render partial: 'submissions_table', locals: {submissions: @submissions, exercise: @activity, course: @course, user: @user }) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#submissions-table-wrapper"), "<%= escape_javascript(render partial: 'submissions_table', locals: {submissions: @submissions, exercise: @activity, course: @course, user: @user }) %>");
 if (dodona.feedbackTableLoaded) {
     dodona.feedbackTableLoaded(
         <%= raw "#{current_user&.id || 'undefined'}" %>,

app/views/users/available_for_repository.js.erb

@@ -1,4 +1,4 @@
-$("#users-table-wrapper").html("<%= escape_javascript(render partial: 'users/repository_users_table', locals: {users: @users, too_many_results: @too_many_results, imprecise_filter: @imprecise_filter }) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'users/repository_users_table', locals: {users: @users, too_many_results: @too_many_results, imprecise_filter: @imprecise_filter }) %>");
 <% if @repository %>
 dodona.repositoryAdminsUsersLoaded();
 <% end %>

app/views/users/index.js.erb

@@ -1 +1 @@
-$("#users-table-wrapper").html("<%= escape_javascript(render partial: 'users/users_table', locals: {users: @users, pagination_opts: @pagination_opts }) %>");
+dodona.setHTMLExecuteScripts(document.querySelector("#users-table-wrapper"), "<%= escape_javascript(render partial: 'users/users_table', locals: {users: @users, pagination_opts: @pagination_opts }) %>");