Switch from jQuery AJAX to Fetch (#300)

Migrate from jQuery's $.ajax to the standard Fetch API. Also, prevent a race condition between the version callback and the updates (changelog) callback.
Aspine · Apr 28, 2021 · 1eb6664 · 1eb6664
1 parent 9afb2d4
commit 1eb6664
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 84 deletions.
diff --git a/public/js/buttonFunctions.js b/public/js/buttonFunctions.js
@@ -315,18 +315,7 @@ let exportTableData = async function(prefs) {
 
   let obj = {};
 
-//#ifndef lite
-  obj.version = await $.ajax("/version");
-//#endif
-
-//#ifdef lite
-/*
-  obj.version = (
-//#include VERSION
-  );
-*/
-//#endif
-
+  obj.version = document.querySelector("#version").textContent;
   obj.username = currentTableData.username;
   obj.overview = currentTableData.overview;
 
@@ -349,15 +338,16 @@ let exportTableData = async function(prefs) {
             $("#export_status").html(
               `Downloading quarter "${term}" from Aspen&hellip;`
             );
-            const response = await $.ajax({
-              url: "/data",
+            const response = await (await fetch("/data", {
               method: "POST",
-              data: {
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
                 quarter: parseInt(term.match(/\d+/)[0]),
                 year: "current",
-              },
-              dataType: "json json"
-            });
+              }),
+            })).json();
             currentTerm = term;
             responseCallbackPartial(response);
             $("#export_status").html("");
@@ -407,18 +397,7 @@ let exportTableData = async function(prefs) {
  * @returns {Promise<string>}
  */
 let importTableData = async function(obj) {
-
-//#ifndef lite
-  let version = await $.ajax("/version");
-//#endif
-
-//#ifdef lite
-/*
-  let version = (
-//#include VERSION
-  );
-*/
-//#endif
+  const version = document.querySelector("#version").textContent;
 
   let _ov, _v;
   if (

diff --git a/public/js/clock.js b/public/js/clock.js
@@ -107,10 +107,7 @@ function update_formattedSchedule() {
 }
 
 //#ifndef lite
-$.ajax({
-    url: "schedule.json",
-    method: "GET"
-}).then(schedulesCallback);
+fetch("/schedule.json").then(async res => schedulesCallback(await res.json()));
 //#endif
 //#ifdef lite
 /*

diff --git a/public/js/extraFunctions.js b/public/js/extraFunctions.js
@@ -205,15 +205,15 @@ let listener = function({ target }, callback = () => {}) {
           term_dropdown_active = false;
 
           const year = currentTableDataIndex === 0 ? "current" : "previous";
-          $.ajax({
-            url: "/data",
+          fetch("/data", {
             method: "POST",
-            data: { quarter: i - 1, year: year },
-            dataType: "json json",
-            success: response => {
-              responseCallbackPartial(response);
-              callback();
+            headers: {
+              "Content-Type": "application/json",
             },
+            body: JSON.stringify({ quarter: i - 1, year: year }),
+          }).then(async res => {
+            responseCallbackPartial(await res.json());
+            callback();
           });
 
           $("#loader").show();

diff --git a/public/js/home.js b/public/js/home.js
@@ -419,18 +419,22 @@ let assignmentsTable = new Tabulator("#assignmentsTable", {
                     feedback: assignment_feedback,
                 } = cell.getRow().getData();
 
-                let { high, low, median, mean } = await $.ajax({
-                    url: "/stats",
-                    method: "POST",
-                    data: {
-                        assignment_id: assignment_id,
-                        class_id: currentTableData.currentTermData
+                let { high, low, median, mean } = await (await fetch(
+                    "/stats", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json",
+                        },
+                        body: JSON.stringify({
+                            assignment_id: assignment_id,
+                            class_id: currentTableData.currentTermData
                             .classes[selected_class_i].oid,
-                        quarter_id: currentTableData.currentTermData
+                            quarter_id: currentTableData.currentTermData
                             .quarter_oid,
-                        year: currentTableData.type,
-                    },
-                });
+                            year: currentTableData.type,
+                        }),
+                    }
+                )).json();
                 if ([high, low, median, mean].some(x => x === undefined)) {
                     noStats();
                     return;
@@ -1024,12 +1028,9 @@ function responseCallback(response, includedTerms) {
     //initializes hamburger resize
     initialize_resize_hamburger()
 
-    $.ajax({
-        url: "/schedule",
+    fetch("/schedule", {
         method: "POST",
-        dataType: "json json",
-        success: scheduleCallback
-    });
+    }).then(async res => scheduleCallback(await res.json()));
 
     initialize_dayOfWeek_dropdown();
     setup_tooltips();
@@ -1216,12 +1217,9 @@ function openTab(evt, tab_name) {
             $("#loader").show();
             //sets the margins for the pdf viewer
             setup_tooltips();
-            $.ajax({
-                url: "/pdf",
+            fetch("/pdf", {
                 method: "POST",
-                dataType: "json json",
-                success: pdfCallback
-            });
+            }).then(async res => pdfCallback(await res.json()));
         } else if (typeof currentTableData.pdf_files !== 'undefined') {
             generate_pdf(pdf_index);
         }
@@ -1242,12 +1240,9 @@ function openTab(evt, tab_name) {
     }
 
     if (tab_name === "schedule" && !currentTableData.schedule) {
-        $.ajax({
-            url: "/schedule",
+        fetch("/schedule", {
             method: "POST",
-            dataType: "json json",
-            success: scheduleCallback
-        });
+        }).then(async res => scheduleCallback(await res.json()));
     }
 
     classesTable.redraw();
@@ -1325,12 +1320,13 @@ $("#import_button").click(async () => {
 });
 
 //#ifndef lite
-$.ajax({
-    url: "/data",
+fetch("/data", {
     method: "POST",
-    data: { quarter: 0, year: "current" },
-    dataType: "json json",
-}).then(responseCallback);
+    headers: {
+        "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ quarter: 0, year: "current" }),
+}).then(async res => responseCallback(await res.json()));
 //#endif
 
 //#ifdef lite
@@ -1341,17 +1337,13 @@ responseCallback({ nologin: true });
 
 document.getElementById("default_open").click();
 
-// Populate the version number at the bottom of the page.
-// Pointfree style does not work here because jQuery's .text behaves both as
-// an attribute and as a function.
-
-function updatesCallback(upt) {
-    $("#updates").html(upt);
-    document.getElementById("changelog").outerHTML = "<h2 class='info-header'>Version History/What's New:</h2>";
+function updatesCallback(updates, current_version) {
+    document.querySelector("#updates").innerHTML = updates;
+    document.querySelector("#changelog").outerHTML =
+        "<h2 class='info-header'>Version History/What's New:</h2>";
 
     // Hide all versions prior to the current minor version
     const items = document.querySelectorAll("#updates h2:nth-of-type(n+2)");
-    const current_version = document.querySelector("#version").textContent;
     const [, curMajor, curMinor] = current_version.match(/^v?(\d+)\.(\d+)/);
     items.forEach(x => {
         const [, major, minor] = x.textContent.match(/^v?(\d+)\.(\d+)/);
@@ -1371,16 +1363,19 @@ function updatesCallback(upt) {
 }
 
 //#ifndef lite
-$.ajax("/version").then(ver => $("#version").text(ver));
-$.ajax("/updates").then(updatesCallback);
+fetch("/version").then(async res => {
+    const version = await res.text();
+    document.querySelector("#version").textContent = version;
+    updatesCallback(await (await fetch("/updates")).text(), version);
+});
 //#endif
 //#ifdef lite
 /*
-$("#version").text(
+document.querySelector("#version").textContent = (
 //#include VERSION
 );
-updatesCallback(
+updatesCallback((
 //#include CHANGELOG
-);
+), document.querySelector("#version").textContent);
 */
 //#endif