I'm trying to load external scripts from a folder into my createnew.html file and I keep getting this error saying it cannot be found:
Failed to load resource: the server responded with a status of 404 (Not found)
I'm trying to load the scripts in the head of my code, like this:
<head>
<!--C3 CSS script-->
<link href="./scripts/c3.css" rel="stylesheet" type="text/css">
<!--C3 JS script-->
<script src="./scripts/c3.min.js"></script>
</head>
My files are arranged like this:
->public
->views
-createnew.html
->scripts
-c3.css
-c3.min.js
Please help me understand why this doesn't work.
As this question became more popular than expected, I decided to point other problem-havers in the right direction:
Let's say you have organized your files like this:
- server.js
-> MyWebsite(folder)
- index.html
-> js(folder)
- myscript.js
The paths you use are relative to the "working directory" you are in.
When not using a server, and only developing websites locally on your computer, this working directory will be the relative path from your index.html file to your scripts. In this case it would be ./js/mysript.js.
When using a server you need to tell it where this working directory is. In the case of Node.js you would do something like this app.use(express.static('./MyWebsite')) and your js files would be referenced by /js/myscript.js
Notice that when loading from a server you prefix with / instead of ./ since the / really is just a part of the URL to your file hosted by your server, while ./ is specific to the file system.
Change
"./scripts/c3.css"
to
"scripts/c3.css"
You can refer to this question about the relative path of files in HTML.
To refer to the current folder,
./ works only in non-strict doctype mode, while . works in both modes.
So you may try "scripts/c3.css" instead of "./scripts/c3.css"
Related
I got an EAR file, I try to deploy and It deploys fine, without error. The problem is the following:
All the ccs files, images, files, etc are using absolute paths in the HTML files, (the HTML files are being generated through an external program so change to relative paths is not an option), so the styles are not being loaded, the links to other pages don't work, etc.
An example to clarity:
I have the ear deployed in "localhost:8080/app, the index.html file loads but inside the file, I try to use the link to the page2.html, and the path is localhost:8080/page2.html instead "localhost:8080/app/page2.html".
The browser says "the page cannot be loaded"
How can I fix this without change the paths to relative? I have the context root of application.xml with "app" and the welcome file of web.xml inside the war file with "index.html".
the structure is the following:
file.ear
meta-inf
file.war
web-inf
index.html
css folder
pageX.html
I beg for help.
Thanks in advance.
First you need to know understand, how file system works in web.
<link rel="stylesheet" href="slick.css"> // file present in same folder
<link rel="stylesheet" href="css/slick-theme.css"> // file present in css folder of current folder
<link rel="stylesheet" href="/css/slick-theme.css"> // file present in the css folder at the root directory of the current web
<link rel="stylesheet" href="../slick-theme.css"> // file present at one level up the current folder
Since all your files path starts with /, server tries to find it relative to the root directory.
All you need is to deploy your app as root app without any context-root.
This will require 2 things:
1)
<context-root>/</context-root>
2) configuration change at server level, remove default content mapping, try to find
<location name="/" handler="welcome-content"/>
(may vary in your jboss version) and comment it.
Attaching screenshot of your working app:
PS: Delete your EAR from repo or make it private
Deploy your app as ROOT.war
You might also need to tweak your server config to allow this if you keep seeing the server welcome page
If you can't bind the app to / and you can't change the file paths referenced in the app, then the only option would be to use a proxy infront of the sever, something like nginx, so you make the requests to the proxy and it passes the request on to http://appserver/app/
Description
Jquery is not working from local disk -using a downloaded copy of any jquery version does not work ok.
it works ok from ref links over the internet.
per jquery documentation - it is suppose to work from local disk as well
(i.e script src = "local path"...).
my code works fine with reference external links to jquery lib (versions 2.2.4 , 3.2.1 ) no problem
whenever i try to fallback or just use the local downloaded file for the same version it fails!
the relevant code is
<script src async = './jquery-3.2.1.min.js'></script>
or just
<script src = './jquery-2.2.4.min.js'></script>
and i tried several other workarrounds including pasting the whole file into my html as script) none worked neither on chrome nor firefox windows 7-8 node-8.9.1
tried similar to the following as well:
<script>window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>')</script>
error message is:
detailed error: ReferenceError: $ is not defined
detailed error: TypeError: pageExecute is undefined
one suggested solution is: use dev server.
what is dev server and why needed? means what? so i can not just use the local copy of jquery lib?
node.js does not serve ANY files by default (unlike some other web servers). So, if you want the jQuery file to be served by your own web server, then you need to create a route that serves that file or use something like express.static() that serves multiple files.
Since your web URL is http://localhost:6060/example1, you are loading the web page through your own web server. Therefore any script tag such as:
<script src="jquery-2.2.4.min.js"></script>
will be requested form your own web server as:
http://localhost:6060/jquery-2.2.4.min.js
If you don't have a route defined for that specific URL in your node.js server, then you will get an error. If you are using Express in your node.js server, then you either need something like:
app.use(express.static("/someDirPath"));
to create a middleware handler that will automatically look in /someDirPath for files that are requested. Or, you need to make specific routes for files you want to serve:
app.get("/jquery-2.2.4.min.js", function(req, res) {
res.sendFile("/somePath/jquery-2.2.4.min.js");
});
In my design projects, I make a URL distinction between static files and dynamic routes. I use /public at the beginning of the URL path for any public resource as this makes it simple to distinguish which request is for a static resource and which is for a dynamically served route. So, in my script file, I'd use:
<script src="/public/js/jquery-2.2.4.min.js"></script>
And, then on my server, I'd use:
// serve static resources from the public directory below our project
app.use(express.static("/public", path.join(__dirname, public)));
And, then I'd have a directory structure of public static files:
myAppDir
various server files
- public
- js
- css
- img
Issue with file path
If both js and html file in same folder then use:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
I have a VueJS webpack generated project in which I want to link the jQuery & Bootstrap libraries. I've downloaded the sources and want to link the JS & CSS into my HTML file like so:
<script src="/assets/js/jquery-3.2.1.min.js"></script>
The HTML file is in the same folder than the assets folder.
My problem is that the script doesn't load and I have this error:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
None of the solutions I found for this problem leaves me satisfied, people use another file containing some sort of module declaration, but I think it's a bit overkill to have such files when it's only for linking a script file into an HTML file...
So the index.html is in the assets folder?
Won't it just be this then:
I'm using a local webserver to serve a simple, static html page. The project has the following folder structure:
/site
/build
index.html
/bower_components
Index.html is accessible on http://localhost:5455/. In index.html I am loading some assets from ../bower_components:
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
But neither firefox or chrome seem to be able to load resources from this parent folder. I get the following error:
Cannot GET /bower_components/jquery/dist/jquery.min.js
So it looks like it isn't looking in the parent ../bower_components, but in build/bower_components, which obviously isn't right. Why is this, is it some sort of security protocol? And how can I correct this?
If your server is mapped to the build folder, you will NEVER be able to access parent folders, for obvious security reasons!
Some solutions are:
1 - Map your server root to the site folder
or
2 - Put the bower_components folder inside the build folder
You did bind the /build folder to the root of the web server.
You have to bind the /bower_components to some sort of web served address before attempting to reference it in HTML.
I started learning JS and at the moment I am working on Require.js.
Here is the deal, I have simple html page and js in it:
<script data-main="js/main.js" src= "js/lib/require.js" type="text/javascript"></script>
I do really have main.js in the root/js folder but by some reason page is looking for main.js in the root. Error:
*Failed to load resource file:///work/programs/brackets/4proj/main.js*
If I put main.js in the root (data-main="main") all will work as expected but I don't want to have a lot of *js in the root, even 2 js files. I saw in the require.js examples that it is possible but I have had no success with it.
What I've tried:
/js/main.js
./js/main.js
//js/main.js
and all the same without extension. It's still not working.
Here is project structure.
Project folder - 4prog/
/js
/js/lib/ <- jquery.js,require.js
/css
index.html
p.s. I am using Ubuntu + brackets + chromium.
From the docs:
http://requirejs.org/docs/api.html#jsfiles
.js does have meaning to require - it makes it behave like an absolute path.
So does prefixing with "/".
You didn't explicitly mention trying
<script data-main="js/main" src= "js/lib/require.js" type="text/javascript"></script>
Which is what works on my system (from file: !), so I can only assume that either you've got something else going on, or you didn't try that.
You didn't mention your version of require, your OS, or your browser, so that could be it, but it's more likely that trying to do an absolute path with require is messing you up without serving from a web server.