I am creating a product page that show all available product in the form of card. This image show’s how products is displayed on the products page I want a functionality that whenever user click’s on any product card from the available product cards a request is to be made to server to open productshowcase page with complete product detailImages show’s the file i need to render in responce. I tried some method to do that, but none worked well.
The code for product card is
<div class="product-display-c">
<div class="product-card-holding-c">
<!-- -->
<% for (let i=0; i < data.length; i++) {%>
<div id="<%= data[i].id%>" class="product-card-c">
<div class="product-image-c">
<img class="product-card-image" src="<%= data[i].images[0]%>"
alt="random image" />
</div>
<div class="product-detail-c">
<p class="product-name">
<%= data[i].p_name%>
</p>
<p class="product-sp">Rs. <%= data[i].selling_price%>
</p>
<p class="product-mrp">M.R.P: Rs. <span>
<%= data[i].mrp%>
</span> </p>
<p class="product-discount">
<%= data[i].mrp - data[i].selling_price%> off
</p>
<p class="product-quality">Quality verified</p>
</div>
</div>
<% }%>
</div>
</div>
This code create cards as per data received from database.
after that I created a javascript code to send request to server to open productshowcase page with complete product detail. The code is like
document.querySelectorAll('.product-card-c').forEach((div) => {
div.addEventListener('click', function(event) {
console.log(event.target.closest('.product-card-c').id);
const selectedId =event.target.closest('.product-card-c').id;
fetch(`/products/${selectedId}`)
.then(response => console.log(response.text()))
});
});
this code send the id of clicked card to the server. The server side code to handle this is like
app.get('/products/:id', async function(req, res) { try { const selectedId = await db.query(
SELECT * FROM products WHERE id=${req.params.id}); res.render("productshowcase.ejs", {product :selectedId.rows}); } catch (err) { console.log(err); } });
I don’t know what is the issue but nothing happen when i click the card.
Although the server response when i try to hit browser url section with url localhost:3000/products/2 the server open productshowcase page without CSS apllied to it and with lots of error in console like
“Failed to load resource: the server responded with a status of 404 (Not Found)
great-value-trademart.png:1
Failed to load resource: the server responded with a status of 404 (Not Found)
header.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
1:1 Refused to execute script from ‘http://localhost:3000/products/jscript/header.js’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled.
catagory-2.jpg:1
Failed to load resource: the server responded with a status of 404 (Not Found)"
I am totally stucked. Can anyone help me to find where is the error. Thanks in advance.
I tried searching for the correct method to send request to the server but failed to find the right one