So Im using node js with express framework.. the problem is my css file is not found. For other views it just work normally, but when it comes to edit.ejs file it cannot get the css file
I think it related to the url, when I'm pass my the url without ":id" it just work find. It can get the css file. but when I'm using with the ":id" it will not found.
This is the view code (ejs file). the file name is edit.ejs
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Update Parcel</title>
<link rel="stylesheet" href="stylesheets/style.css" />
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
</head>
<body>
<header>
<nav>
<label class="logo">ParcelHero</label>
<ul>
<li><a href="menu">Home</a></li>
<li><a href="/">Log out</a></li>
</ul>
</nav>
</header>
<div class="hero3">
<div class="form-box">
<div class="fontbox">
<center>
<h1>Edit</h1>
</center>
<center>
<h1>Parcel</h1>
</center>
</div>
<form
action="/update/editPost"
method="post"
id="login"
class="input-group"
>
<input
type="text"
name="tracking_number"
class="input-field"
placeholder="Enter new Tracking number"
required
/>
<input
type="text"
name="owner_name"
class="input-field"
placeholder="Enter new parcel owner name"
required
/>
<input
type="text"
name="owner_phoneNumb"
class="input-field"
placeholder="Enter new parcel owner no. phone"
required
/>
<input
type="text"
name="parcelCourier"
class="input-field"
placeholder="Enter new parcel courier name"
required
/>
<input
type="radio"
name="status"
value="Active"
class=""
checked
/>Active
<input type="radio" name="status" value="Inactive" class="" />
Inactive
<button type="submit" class="submit-btn">Save</button>
</form>
</div>
</div>
<div class="sidebar">
<h1>Menu</h1>
<a href="view">View all parcel</a>
<a href="search">Search parcel</a>
</div>
</body>
</html>
This is the .js file from the server site
var express = require("express");
var router = express.Router();
const parcel = require("../models/parcel");
app.use("/update", editRouter);
//this get request is when I'm click the edit button from view page, and it will display the id at the url. I get the page edit. but did not get the css file.
router.get("/:id", function (req, res, next) {
parcel
.findOne({
where: {
id: req.params.id,
},
})
.then((result) => {
res.render("edit", {
data: result,
});
});
});
/output: GET /update/stylesheets/style.css 404 10.334 ms - 1283 */
//but when i'm using just this. I will get the css file
router.get("/", (req, res) => {
res.render("edit");
});
/output:GET /stylesheets/style.css 304 2.488 ms - - */ //this is the one that work
can someone please help Thank you very much
