Kommentare ohne js verfassen

js/comments.js

@@ -16,14 +16,20 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     /**
-     * Aktiviert einen einzelnen Antworten-Button.
+     * Aktiviert einen einzelnen Antworten-Link.
      *
-     * @param {HTMLButtonElement} button Antworten-Button
+     * @param {HTMLAnchorElement} replyLink Antworten-Link
      */
-    function registerReplyButton(button) {
-        button.addEventListener("click", function () {
-            parentCommentInput.value = button.dataset.commentId;
-            replyInfo.textContent = "Antwort auf " + button.dataset.author;
+    function registerReplyButton(replyLink) {
+        replyLink.addEventListener("click", function (event) {
+            /*
+             * Mit JavaScript wird die Seite nicht neu geladen.
+             * Ohne JavaScript funktioniert der normale Link.
+             */
+            event.preventDefault();
+
+            parentCommentInput.value = replyLink.dataset.commentId;
+            replyInfo.textContent = "Antwort auf " + replyLink.dataset.author;
             replyInfo.style.display = "block";
             commentContent.focus();
         });
@@ -45,9 +51,12 @@ document.addEventListener("DOMContentLoaded", function () {
         const formData = new FormData(form);
         const parentCommentId = parentCommentInput.value;
 
-        fetch("php/ajax/add-comment.php", {
+        fetch(form.action, {
             method: "POST",
-            body: formData
+            body: formData,
+            headers: {
+                "X-Requested-With": "XMLHttpRequest"
+            }
         })
             .then(response => response.json())
             .then(data => {
@@ -94,12 +103,12 @@ document.addEventListener("DOMContentLoaded", function () {
                         </p>
                         <p>${escapeHtml(data.content).replace(/\n/g, "<br>")}</p>
 
-                        <button type="button"
-                                class="reply-button"
-                                data-comment-id="${escapeHtml(data.commentId)}"
-                                data-author="${escapeHtml(data.author)}">
-                            Antworten
-                        </button>
+                        <a href="#comment-form"
+                        class="reply-button"
+                        data-comment-id="${escapeHtml(data.commentId)}"
+                        data-author="${escapeHtml(data.author)}">
+                        Antworten
+                        </a>
 
                         <div class="comment-replies"></div>
                     `;