implement async requests module (client JS, JSON, background requests, DOM updates.

Author: martialchess

controllers/admin.js

@@ -184,8 +184,8 @@ exports.getProducts = (req, res, next) => {
     });
 };
 
-exports.postDeleteProduct = (req, res, next) => {
-  const prodId = req.body.productId;
+exports.deleteProduct = (req, res, next) => {
+  const prodId = req.params.productId;
   Product.findById(prodId)
     .then(product => {
       if (!product) {
@@ -196,11 +196,9 @@ exports.postDeleteProduct = (req, res, next) => {
     })
     .then(() => {
       console.log('DESTROYED PRODUCT');
-      res.redirect('/admin/products');
+      res.status(200).json( { message: 'Success!' });
     })
     .catch(err => {
-      const error = new Error(err);
-      error.httpStatusCode = 500;
-      return next(error);
+      res.status(500).json({ message: 'Deleting product failed.' });
     });
 };

images/2025-10-21T09-52-08.392Z-pythonimg.png

@@ -0,0 +1,21 @@
+const deleteProduct = (btn) => {
+    const prodId = btn.parentNode.querySelector('[name=productId]').value;
+    const csrfToken = btn.parentNode.querySelector('[name=_csrf]').value;
+
+    const productElement = btn.closest('article');
+
+    fetch('/admin/product/' + prodId, {
+        method: 'DELETE',
+        headers: {
+            'csrf-token': csrfToken
+        }
+    }).then(result => {
+        return result.json();
+    }).then(data => {
+        console.log(data);
+        productElement.parentNode.removeChild(productElement);
+    })
+    .catch(err => {
+        console.log(err);
+    });
+};

images/2025-10-21T10-39-03.547Z-pythonimg.png

@@ -51,7 +51,8 @@ router.post('/edit-product',
     isAuth, 
     adminController.postEditProduct);
 
-router.post('/delete-product', isAuth, adminController.postDeleteProduct);
+router.delete('/product/:productId', isAuth, adminController.deleteProduct);
 
 module.exports = router;
 
+

public/js/admin.js

@@ -28,12 +28,9 @@
                                 </div>
                                 <div class="card__actions">
                                     <a href="/admin/edit-product/<%= product._id %>?edit=true" class="btn">Edit</a>
-                                    <form action="/admin/delete-product" method="POST">
-                                        <input type="hidden" value="<%= product._id %>" name="productId">
-                                        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
-                                        <button class="btn" type="submit">Delete</button>
-                                    </form>
-
+                                    <input type="hidden" value="<%= product._id %>" name="productId">
+                                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
+                                    <button class="btn" type="button" onclick="deleteProduct(this)">Delete</button>
                                 </div>
                             </article>
                             <% } %>
@@ -42,4 +39,5 @@
                         <h1>No Products Found!</h1>
                         <% } %>
             </main>
-            <%- include('../includes/end.ejs') %>
+            <%- include('../includes/end.ejs') %>
+            <script src="/js/admin.js"></script>