Question posted in 
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
3
Answers
EJS is a server-side template engine, which means the HTML is created on the server and typically sent back as a HTTP response. What you are trying to do is make a fetch request which will get that rendered HTML and store it as text when you do
.then(response => console.log(response.text())). After that nothing happens. The HTML won’t magically append itself to the DOM or replace the existing HTML on your page.When using fetch it’s to typically get data from the sever usually as JSON and from that JSON payload you can loop through is properties and append/replace HTML elements to the DOM. You would need to write code to do that. Alternatively you could just send a url back as the response and redirect the browser to navigate to the new url.
My honest advice if sticking with EJS would be
Option 1:
Warp each card in an
<a>tag with theidof each product appended to thehrefattribute. That way when your user clicks on a card the browser sends a standardGETrequest to/products/:idand is redirected appropriately.This means you can delete all of that
document.querySelectorAll('.product-card-c').forEachcode.An example would be:
Option 2:
Don’t change any HTML code and instead of sending a fetch request use your
clickhandler to navigate to the new url like so:This what i get as result