From: Chris Fulljames <christianfulljames@gmail.com>
Date: Wed, 19 Feb 2025 12:30:07 +0000 (-0500)
Subject: Use ajax for form submission
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=61463b347919ed6517ecb59f4f5e10edcbe0a7fa;p=littlesongplace.git

Use ajax for form submission
---

diff --git a/templates/base.html b/templates/base.html
index be0e150..ff09138 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,37 +16,48 @@
                     return;
                 }
 
-                // Only intercept links to other pages on the site
                 var targetUrl = new URL(event.target.href);
-                var currentUrl = new URL(window.location.href);
-                if (targetUrl.origin !== currentUrl.origin) {
-                    return;  // Link to external site
+                if (urlIsOnSameSite(targetUrl)) {
+                    event.preventDefault();
+                    fetch(targetUrl, {redirect: "follow", headers: {"Accept": "application/json"}}).then(handleAjaxResponse);
                 }
-
-                event.preventDefault();
-
-                // Update HTML
-                getPageAjax(targetUrl);
-            })
-            async function getPageAjax(url) {
-                fetch(url, {redirect: "follow", headers: {"Accept": "application/json"}}).then(async (response) => {
-                    // Update URL in browser window, minus request-type field
-                    var url = new URL(response.url);
-                    url.searchParams.delete("request-type");
-                    window.history.pushState({}, "", url);
-
-                    // Get page content from JSON response
-                    var data = await response.json();
-                    document.getElementById("main").innerHTML = data.body;
-                    document.title = data.title;
-
-                    // Trigger event to signal new page has loaded
-                    var event = new Event("DOMContentLoaded");
-                    document.dispatchEvent(event);
-
-                    // Refresh navbar in case logged-in status changed
-                    updateNavbar(data.username);
+            });
+            document.addEventListener("DOMContentLoaded", (e) => {
+                document.querySelectorAll("form").forEach((form) => {
+                    console.log("found form");
+                    form.addEventListener("submit", (event) => {
+                        console.log("on submit");
+                        var targetUrl = new URL(event.target.action);
+                        if (urlIsOnSameSite(targetUrl)) {
+                            event.preventDefault();
+                            var formData = new FormData(event.target);
+                            fetch(targetUrl, {redirect: "follow", body: formData, method: event.target.method, headers: {"Accept": "application/json"}})
+                                .then(handleAjaxResponse);
+                        }
+                    });
                 });
+            });
+            function urlIsOnSameSite(targetUrl) {
+                var currentUrl = new URL(window.location.href);
+                return targetUrl.origin === currentUrl.origin;
+            }
+            async function handleAjaxResponse(response) {
+                // Update URL in browser window, minus request-type field
+                var url = new URL(response.url);
+                url.searchParams.delete("request-type");
+                window.history.pushState({}, "", url);
+
+                // Get page content from JSON response
+                var data = await response.json();
+                document.getElementById("main").innerHTML = data.body;
+                document.title = data.title;
+
+                // Trigger event to signal new page has loaded
+                var event = new Event("DOMContentLoaded");
+                document.dispatchEvent(event);
+
+                // Refresh navbar in case logged-in status changed
+                updateNavbar(data.username);
             }
             function updateNavbar(username) {
                 var loggedIn = username ? true : false;
diff --git a/todo.txt b/todo.txt
index 5867d39..f5afb4d 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,9 +1,9 @@
 NOW
 - AJAX pages so songs can play during navigation
-    - Forms
     - Back (history stack)
     - Update page colors
     - Use correct content type header for response
+    - HTTP Error handling
 - Break up main.py, test_offline.py
 - Pinned profile playlists