ajax implementiert

2026-06-15 21:54:06 +02:00
parent eb56b8d6a0
commit e1ee70b46f
4 changed files with 129 additions and 49 deletions
@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const form = document.getElementById("comment-form");
+    const commentsList = document.getElementById("comments-list");
+    const commentContent = document.getElementById("comment-content");
+
+    if (!form || !commentsList || !commentContent) {
+        return;
+    }
+
+    form.addEventListener("submit", function (event) {
+        event.preventDefault();
+
+        const formData = new FormData(form);
+
+        fetch("php/ajax/add-comment.php", {
+            method: "POST",
+            body: formData
+        })
+            .then(response => response.json())
+            .then(data => {
+                if (!data.success) {
+                    alert(data.message);
+                    return;
+                }
+
+                const emptyMessage = commentsList.querySelector(".no-comments-message");
+                if (emptyMessage) {
+                    emptyMessage.remove();
+                }
+
+                const commentElement = document.createElement("div");
+                commentElement.classList.add("comment-item");
+
+                commentElement.innerHTML = `
+                    <p>
+                        <strong>${escapeHtml(data.author)}</strong>
+                        <span>${escapeHtml(data.created)}</span>
+                    </p>
+                    <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
+                `;
+
+                commentsList.prepend(commentElement);
+                commentContent.value = "";
+            })
+            .catch(() => {
+                alert("Kommentar konnte nicht gesendet werden.");
+            });
+    });
+
+    function escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+});