I am trying to serve static files like .css .js using a node js server. The index.html file gets served and the linked css and js also gets loaded.
Now I have a div inside the index.html file into which I load the content of another html file called login.html. This login.html file has a css and a js file linked to it. The login.html itself gets loaded using a jquery function load() which means that it can accessed by the server. However, the css and js linked to login.html doesn't get loaded due to wrong file path.
Here is the folder structure see this image
Here are the main parts of the index.html
<!DOCTYPE html>
<html>
<head>
<title>Anything</title>
<link href="./index/index.css" type="text/css" rel="stylesheet"> //These files
<script src="./Resources/jquery/jquery-3.2.1.js"></script> //get loaded
<script src="./index/index.js"></script> //by the server
</head>
<body>
<div class="content"></div> // I am trying to load login.html here
</body>
</html>
Here is the jquery function
$(".user").click(function(){
$(".content").load("./../pages/login/login.html");
});
".user" is a div I haven't shown in index.html
Here is the login.html
<link href="./login.css" type="text/css" rel="stylesheet"> //doesn't load
<script src="./login.js"></script> //doesn't load
<h2>Login is loaded</h2>
And finally here is the server.js used to create the node js server
var express = require("express");
var app = express();
var path = require("path");
app.set('port', 8080);
app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "login")));
var server = app.listen(app.get('port'), function() {
var port = server.address().port;
});
console.log("Server running.");
Conclusion: The server can't load the css and js files of secondarily served html files.
Objective: Load the login.css and login.js using this node js server through the login.html page.
via NirabhroMakhal
No comments:
Post a Comment