At a specific point in the route, all CSS and JS links in Node.js vanish

Hey everyone, I'm facing a strange issue where the CSS styling and JS code are not loading when I access the route http://localhost:5000/posts/edit/<%=idofblog%>. As a result, my webpage looks very unattractive, and I'm not sure what's causing this issue since all other routes are working fine.

All my CSS and JS folders are located inside the public folder.

app.use(express.static(path.join(__dirname,'public')));

This is my file structure: enter image description here

Within the _layout folder, I have a header.ejs file that contains links to CSS like this:

<link rel="stylesheet" type="text/css" href="../css/register.css">

Every route works perfectly, but when I visit the route http://localhost:5000/posts/edit/<%=idofblog%>, all CSS and JS code disappear, along with images. Within the posts.js route, I have the following:

router.get('/edit/:id',(req,res)=>{
res.render('edit');

}); And the href link in the ejs file is as follows:

<a href="edit/<%=post._id%>" class="btn btn-info btn-rounded">Edit</a>

The page loads with all the input fields and textarea, but without any styling. I'm unsure of what I am doing wrong.

Answer №1

It seems like the issue you might be facing is related to using relative paths for loading your styles and scripts. It is recommended to use absolute paths instead. For instance, when loading CSS files, the correct way to do it is as follows (ensure to adjust the path based on your project structure):

<link rel="stylesheet" type="text/css" href="public/css/register.css">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with escaping special characters in random string HTML

As I was in the process of creating a JavaScript tool to generate random strings, with or without special characters, I stumbled upon an inspiring snippet that caught my attention: (): function randStr(len) { let s = ''; while (len--) s += ...

Converting XML to HTML with the help of XSLT transformation customization

I need assistance in adjusting the XSLT 1.0 transform within the provided xsl file to create an HTML version of the table coded in the attached XML file. The generated HTML output file should display the table from the XML file with alternating row backgro ...

socket.io establishes several sockets for each connection

At times, when the server is experiencing some load, connecting to the page may result in multiple sockets being created. If there is significant lag, the connection may never be established while additional sockets are generated every second indefinitely. ...

Different ways to alter the color of contextual color classes in Bootstrap 5

Currently working on my project with Bootstrap 5, I've been incorporating elements featuring classes such as btn-primary and text-success. In Bootstrap, the -primary class is associated with blue, while -success corresponds to green, among others. I&a ...

switchMap: Triggering multiple requests simultaneously (2)

Currently, I am utilizing Angular 2 RC-4 and facing an issue where a network request is being triggered twice whenever there is a change in the input box. This is what my code looks like: component.ts this.term = new Control(); this.suggestions = this. ...

Asserting types for promises with more than one possible return value

Struggling with type assertions when dealing with multiple promise return types? Check out this simplified code snippet: interface SimpleResponseType { key1: string }; interface SimpleResponseType2 { property1: string property2: number }; inter ...

Is there a way to have the font size in an H1 adjust dynamically to fill the entire width of the H1 using just CSS?

My h1 Element <h1>Title Of Element<h1> The h1 has a width of 200px h1{width:200px;} Although the h1 is indeed 200px wide, the text inside does not fully utilize that width. I expected setting font-size to 100% h1{font-size:100%;} However, t ...

The javascript file is unable to detect the presence of the other file

I am facing an issue with two JavaScript files I have. The first one contains Vue code, while the other one includes a data array where I created the 'Feed' array. However, when trying to output a simple string from that array, the console throws ...

tips for iterating through a json string

When retrieving data from PHP, I structure the return like this: $return['fillable'] = [ 'field_one', 'field_two', 'field_three', 'field_four', 'field_five', ]; $json = json_ ...

Add a parameter within a loop using JavaScript

I am currently working on a function with a parameter called menu. removeChildCheck:function(menu){ let removeArrayValues = []; for(var i=0; i < this.checkbox.menu.length; i++){ removeArrayValues.push(this.checkbox.menu[i].value); ...

Encountered a VUE error stating "Cannot use 'in' operator to search for 'path' in undefined". This issue led to an infinite loop, prompting me to search for solutions on StackOverflow and other similar forums. More details can be found

I am currently using this demo for learning purposes. If you want to see the full code, you can visit my GitHub repository here: https://github.com/tNhanDerivative/nhanStore_frontEnd and access my domain: vuestore.nhan-thenoobmaster.com. The error I am exp ...

"Encountered a floating-point issue when trying to read an Excel file with

When a user uploads an Excel file that contains decimal, string, and Unicode characters, I am encountering an issue with floating point errors when reading certain decimal values. For instance, a number like 0.15 is being read as 0.150000000002 in some c ...

Achieving success in element-ui vuejs involves validating the state with the :error parameter

I recently developed an app using Laravel, Vuejs, and Element-ui. Within my form, I have utilized the "error" property to indicate that Laravel validation is in place. <el-form-item label="First Name" prop="firstname" :error="registerForm.errors.get(&a ...

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

Executing javascript href using Python in Selenium

Currently, I am attempting to use Selenium in Python to click on a href JavaScript link. The HTML code appears as follows: HTML Example and my goal is to click on javascript:goType(1). This is the approach I have taken: advance_search = browser.find_el ...

The extended class possesses a distinct type from the base class, which is reinforced by an interface

Is it possible to write a method that is an extension of a base class, but with a different return type, if supported by the shared interface, without adding a type declaration in class 'a'? In practical terms, classes a & b exist in JavaScript ...

Update the variable values in the Onclick function

I am trying to modify the onClick function attached to a button. My goal is to change the function var from 'create' to 'update' when the page loads and also through other functions. I attempted the code below but it did not work as exp ...

Halt and anticipate a boolean reply from another function

Is there a way to create two functions in JavaScript, run one of them, then within that function, execute the other and pause until it receives a response (yes or no) before moving on to an if statement? The user's response should be manual. Here is ...

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

Creating applications with Angular2 and TypeScript is possible even without utilizing NPM for development

I've seen all the guides recommend installing npm, but I'm determined to find an alternative method. I found Angular2 files available here, however, none of them are in TypeScript code. What is the best course of action? Do I need Angular2.ts, ...