im having an issue with this piece of code not reading the correct path or something.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/scripts/cmarkercaller.js"></script> <!--Citymarker Caller-->
<script type="text/javascript">
my "index.html" is in the same folder as my "scripts" folder.
Much Thanks for any advice / assistance!!
There is a path reference error with the second script. It should be either:
<script src="scripts/cmarkercaller.js"></script> <!--Citymarker Caller-->
or
<script src="./scripts/cmarkercaller.js"></script> <!--Citymarker Caller-->
depending on where cmarkercaller.js is located. You should keep the following in mind:
/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.
Related
With Vite, using absolute paths in index.html results in them being transformed based on the base config, which is nice.
For instance my index.html contains this:
<script type="text/javascript" src="/config.js"></script>
And base is set to "/demo". The exported index.html will contain:
<script type="text/javascript" src="/demo/config.js"></script>
This is fine for most of my file but I would need to have a script loaded from the root of the server for a very specific thing. Is it possible to indicate to Vite to not change the path of a specific script tag? Like a preprocessor command? Like this:
<!-- #vite-ignore -->
<script type="text/javascript" src="/config.js"></script>
That would be nice!
I used an ugly fix:
<script type="text/javascript">
// We have to do it using javascript otherwise Vite modifies the path
var config = document.createElement('script')
config.type = 'text/javascript'
config.src = '/config.js'
document.head.appendChild(config)
</script>
I am trying to write a very simple HTML page that displays a message generated by a JS file. I am somewhat new to HTML / JS and I am certain there is something pretty simple I am missing, but I cannot for the life of me get the page to read the script. When I load the page, it is completely BLANK without any errors in the inspector.
This is the project folder structure:
-Project (folder)
--templates (folder)
----home.html
--src (folder)
----home.js
--styles (folder)
----home.css
Also, I'm pretty sure that my HTML page SEES the script, because when I remove or rename the script, I get an error in the browser's inspector telling me that it cannot find the script. So it SEES the script, it just is not running it for some reason.
Here is the code...
home.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/home.css"></link>
<script type="type/javascript" src="../src/home.js"></script>
</head>
<body>
<div id="bodytext"></div>
</body>
</html>
home.js:
(function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
})();
Could some generous soul out there please clue me in to what extremely simple mistake I'm making?
Thank You!
Value for type attribute should be text/javascript as follows:
<script type="text/javascript" src="../src/home.js"></script>
Your script is running before the DOM is completely done loading. If you put your <script> tag right before your closing body tag (</body>), it will run after the DOM is loaded, and you will be able to traverse the DOM like normal.
Value for type attribute should be text/javascript as follows
enter code here
ALong with this you will have to change your java script code as follows, so that script gets executed only when page is completely loaded & document object is availabe.
window.onload = function() {
console.log("I AM READING THE SCRIPT");
document.getElementById('bodytext').innerHTML = "I AM READING THE SCRIPT";
};
What worked for me was adding charset="utf-8" to my css link as well as my javascript script (for me, both did not work). Example:
<link rel="stylesheet" type="text/css" href="css/main.css" charset="utf-8"></link>
<script src="javascript/script.js" charset="utf-8"></script>
I have a problem loading external files into my index.html. My stylesheet as well as my JS files do not show up at all (Error 404 - Not Found). My directory structure is as follows.
My index.html is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Orders and Customers</title>
<link rel="stylesheet" type="text/css" href="./assets/css/stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script src="./../app/app.js" type="text/javascript"></script>
<script src="./../app/controllers/customer/CustomerController.js"></script>
<script src="./../app/controllers/order/OrderController.js"></script>
<script src="./../app/services/customer/CustomerService.js"></script>
<script src="./../app/services/order/OrderService.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
This is what Chrome shows:
My server.js is:
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
require('./server/config/mongoose.js');
require('./server/config/routes.js')(app);
app.use(express.static(path.join(__dirname, './views')));
app.listen(8000, function() {
console.log('Listening on Port 8000');
})
Any help is greatly appreciated!
Try this
in server.js
var router = express.Router();
router.use(express.static(path.resolve(__dirname, "../app")));
in index.html
<script src="/app.js" type="text/javascript"></script>
<script src="/controllers/customer/CustomerController.js"></script>
<script src="/controllers/order/OrderController.js"></script>
<script src="/services/customer/CustomerService.js"></script>
<script src="/services/order/OrderService.js"></script>
Router is middle-ware for capture * path.
For example, /service/* matches all requests under service path.
so I changed your code as to handle all resources under "/app" folder. (eg: /app/app.js, etc)
path.resolve changes path from relative to absolute.
it means that you can add another current working directory.
path.resolve(__dirname, "../app") add "/app" from current working directory (views). it parsed from "views/../app" to "/app"
(Reference) Path.resolve
The relative paths
<script src="./../app/app.js" type="text/javascript"></script>
etc, are pointing to the wrong directory.
Use the Network tab in your browser developer tools, to check what exact requests are going out.
If the whole app directory is public (Which, in my opinion, should not be the case), "./../" will refer to the views directory.
Single . refers to the current directory, which in this case is, the one containing your index.html. Double .. refers to the directory above it, which here is views.
Rather than
<script src="./../app/app.js" type="text/javascript"></script>
Try using the full path:
<script src="/app/app.js" type="text/javascript"></script>
<script src="/app/controllers/order/OrderController.js"></script>
Try this
app.use(express.static(path.join(__dirname, 'views')));
and just use
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
Thanks to SeongHyeon, I was able to figure out the solution to my problem. I really appreciate your guys' help. I'd like to elaborate more on this just for my own reference.
When declaring your static path in express, you don't need to reference anything relative to the file that you're trying to import from. Instead, you simply reference the file from the static path that you've declared.
What's the difference between following relative paths?
<script type="text/javascript" src="../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.2.6.js"></script>
Which refers what?
e.g. I have a web app names ASPWP1 and folder structure as follows
ASPWP1->Folder1
ASPWP1->Folder1->JS1.js
ASPWP1->Folder1->Sample1.aspx
ASPWP1->Folder2
ASPWP1->Folder2->JS2.js
ASPWP1->Folder2->Sample2.aspx
ASPWP1->Folder3->JS3.js, JS4.js
How to refer JS1 in sample1.aspx?
How to refer JS1 in Sample2.aspx?
How to refer JS3/JS4 in Sample1.aspx
Please guide me in understanding relative paths.
Thanks in advance
The tilde (~) refers to HttpRuntime.AppDomainAppVirtualPath which is usually the route of the virtual directory.
Have you tested: < script type="text/javascript" src="~/Scripts/jquery-1.2.6.js">
I'm surprised it would actually reference the file without a runat="server" tag as JavaScript would not be able to determine the value of HttpRuntime.AppDomainAppVirtualPath.
I have included a MSDN source which you should read to help you understand this better.
http://msdn.microsoft.com/en-us/library/ms178116.aspx
We have an MVC3 application in IIS7: http://mydomain.com/myapplication/
What would be the relative URL in javascript for:
http://mydomain.com/myapplication/mycontroller/myaction
/mycontroller/myaction - goes to http://mydomain.com/mycontroller/myaction
../mycontroller/myaction - goes up one level (in this case also to http://mydomain.com/mycontroller/myaction)
mycontroller/myaction - goes to http://mydomain.com/myapplication/mycontroller/myaction when running as dev on localhost but on server goes to http://mydomain.com/mycontroller/myaction
./mycontroller/myaction - was what I figured would be right, but that didn't work either!
If you are developing in ASP.NET MVC you can set root var on server side like this:
<script language="javascript" type="text/javascript">
var root = '<%= this.Request.ApplicationPath%>';
</script>
and use it in JS:
<script language="javascript" type="text/javascript">
img = root + '/someotherrootfile.js'
</script>
You would just list the file name.
<script src="filename.js"></script>
If I understand you correctly you would only need to list the filename or path directory with no leading slash.