What are Asynchronous requests?
behind asynchronous requests is that you do send the request but that request typically contains just some data in a special format named json and that data is sent to the server, to a certain URL or a route accepted by that server, so that logic doesn't change. The server can do whatever it wants to do with that and then we return a response and that response is also returned and then we return a response and that response is also returned behind the scenes so it's not a new html page that needs to be rendered, it's instead again just some data in that json format typically. And that is how client server can communicate through JavaScript, so through client side JavaScript and the server side logic without reloading or rebuilding the page, so through client side JavaScript and the server side logic without reloading or rebuilding the page, without exchanging a new html page. And that allows you to do some work behind the scenes without interrupting the user flow, without reloading the page.
Adding Client Side JavaScript code
This is a special keyword and in the context here, it will refer to the element on which we clicked, so to the button. Now since I get this, in admin.ejs, I can access to the button since I now receive this
now since we'll send the request directly through JavaScript, we can actually use a different http Thus far we always use get and post because the browser natively supports these for the requests sent by the browser, by form submission and by clicking links, it only knows get and post. When we send requests through JavaScript, so through browser side JavaScript, we have access to other http verbs too and you'll learn more about the
One of them is delete and this is a http verb, so http method which makes a lot of sense for deleting.
We can use any http verb to do anything because we define with our server side logic but it makes sense to try to be clear about your intention and there is a delete verb,
Fetch
fetch method which is a method supported by the browser for sending http requests and it's not just for fetching data as the name might suggest, it's also for sending data. and it's not just for fetching data
So basically All we want to do is delete directly a product without reloading that page or redirecting that page we use async request.
How you can implement in your app is very simple.
const deleteProduct = (btn) => { const prodId = btn.parentNode.querySelector('[name=productId]').value; const csrf = btn.parentNode.querySelector('[name=_csrf]').value; const productElement = btn.closest('article'); fetch('/admin/product/' + prodId, { method:'DELETE', headers: { 'csrf-token': csrf } }) .then(result => { return result.json(); }) .then(data => { console.log(data); productElement.parentNode.removeChild(productElement); }) .catch(err => { console.error(err) }) };
Controller Admin page
exports.deleteProduct = (req, res, next) => {
const prodId = req.params.productId;
Product.findById(prodId)
.then(product => {
if (!product) {
return next(new Error('Product not found'));
}
fileHelper.deleteFile(product.imageUrl);
return Product.deleteOne({ _id: prodId, userId: req.user._id })
})
.then(() => {
console.log('DESTROYED PRODUCT');
res.status(200).json({ message: 'Success' });
})
.catch(err => {
res.status(500).json({ message: 'Delete product failed' })
});
};
Admin Route:
router.delete('/product/:productId', isAuth, adminController.deleteProduct); Product View Page in Admin
<%- include('../includes/head.ejs') %> <link rel="stylesheet" href="/css/product.css"> </head> <body> <%- include('../includes/navigation.ejs') %> <main> <% if (prods.length> 0) { %> <div class="grid"> <% for (let product of prods) { %> <article class="card product-item"> <header class="card__header"> <h1 class="product__title"> <%= product.title %> </h1> </header> <div class="card__image"> <img src="/<%= product.imageUrl %>" alt="<%= product.title %>"> </div> <div class="card__content"> <h2 class="product__price">$ <%= product.price %> </h2> <p class="product__description"> <%= product.description %> </p> </div> <div class="card__actions"> <a href="/admin/edit-product/<%= product._id %>?edit=true"class="btn">Edit</a> <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> <% } %> </div> <% } else { %> <h1>No Products Found!</h1> <% } %> </main> <%- include('../includes/end.ejs') %> <script src="/js/admin.js"></script>