This is a very simple thing that I can't seem to get to work. What is the correct way for referencing my resources folder in my script and link tags? Is there a trick to this since my URLs are mapped to Spring resources? Do I have to do anything special since my resources folder isn't in my WEB-INF folder? Do I need to move it into the WEB-INF folder? If I do move it there, how would it be referenced inside the WEB-INF folder. I have tried everything I can think of, including....
With folder in current position -
/WebContent/resources/scripts/jquery-1.6.1.min.js
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
With folder inside WEB-INF -
/resources/scripts/jquery-1.6.1.min.js
../resources/scripts/jquery-1.6.1.min.js
../../resources/scripts/jquery-1.6.1.min.js
/../resources/scripts/jquery-1.6.1.min.js
/../../resources/scripts/jquery-1.6.1.min.js
Are any of these right?
I'm getting this in my console when I use 'resources/scripts/jquery-1.6.1.min.js' -
May 23, 2011 11:30:19 AM org.springframework.web.servlet.DispatcherServlet noHandlerFound
WARNING: No mapping found for HTTP request with URI
[/ProjectName/resources/styles/global.css] in DispatcherServlet with name 'spring'
home.jsp -
<html>
<head>
<title>
title goes here
</title>
<script type="text/javascript" src="/WebContent/resources/scripts/global.js"></script>
<script type="text/javascript" src="/WebContent/resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/WebContent/resources/styles/global.css" media="screen" />
<script type="text/javascript">
$(document).ready(
function(){
alert('hello');
});
</script>
</head>
<body>
${message}
<input id="inputField"></input>
</body>
</html>
Replace for this:
<script type="text/javascript" src="resources/scripts/global.js"></script>
<script type="text/javascript" src="resources/scripts/jquery-1.6.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="resources/styles/global.css" media="screen"
Related
<!doctype html>
Multi Level Dropdown
<link href="https://unpkg.com/ionicons#4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
...................
<script type="text/javascript" src="scripts.js"></script>
it is hard to understand your problem based on the context you gave. Consider to be more precise and share all of your code. However a couple of ideas:
Your <script> tag should be placed within the <body> ... </body> tag
Use <script type="text/javascript" src="./scripts.js"></script>
Check/ confirm whether your stylesheet "style.css" is working
Check for valid javascript code by testing with simple code such as alert('Test'); in your scripts.js file
I was working on some project and here is "index.html" file of my Angular project.
<!doctype html>
<html ng-app="templateApp">
<head>
<meta charset="utf-8">
<title> MEAN project template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- including App scripts -->
<!-- JQuery -->
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- App scripts -->
<script type="text/javascript" src="configs/app_setup.js">
</script>
</head>
<body>
</body>
</html>
and my project hierarchy as following:
client (contains: configs(folder) & index.html )
bower_components
my curious question here: what are the rules for script tags i expected the above "bower_components" path should not work but it works well.
and the above path and the following one are working without problems, so how that happened although they are different ??!!
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
it seems by default it looks into the root project directory, and then check for relative paths.
This one would make the directory go up one level from the directory that your index.html is located in
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
Where as the following one would make the folder bower_componets be in the same directory as your index.html
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js">
</script>
I'm referencing these files in my index.html:
<link href="wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="wwwroot/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="wwwroot/lib/jquery/dist/jquery.min.js"></script>
<script src="wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="wwwroot/lib/angular/angular.min.js"></script>
<script src="wwwroot/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="wwwroot/app/app.js"></script>
<script src="wwwroot/app/controllers/home.controller.js"></script>
But when I build the project with IIS Express in visual studio, I get a 404 error for each one. When I look at the console and resources tabs in Chrome to see where it's trying to pull the files from, I see that the directory is an old one from a previous, similar project.
I've tried clearing my cache in several different ways and deleting the old project altogether, but nothing is working...
wwwroot is the root WWW directory. You should remove these path prefixes from your script's and css's links.
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/angular/angular.min.js"></script>
<script src="~/lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers/home.controller.js"></script>
I am using ExpressJS. My scripts or CSS will not load.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<title>Customer Info</title>
<link rel="stylesheet" href="/stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="/javascripts/jquery-1.9.1.js"></script>
<script src="/javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/javascripts/testing.js"></script>
</head>
<body>
//body contents
</body>
</html>
I know the problem is not with the location. When I render this EJS view in express none of the scripts are loading. I can not understand why it would work for an almost identical view, but not this one. Any ideas?
Step 1
In your node.js file locate the part where you configure the express.
It would be like.
var express = require('express')
, app = express();
app.configure(function() {
//configure the express codes go here
}
in that check out the line of code where you configure the folder which serves the static files. like images,css, and js. I would be like.
app.use(express.static(__dirname + '/public'));
here in the above case public should be exactly the name of the parent folder which holds the stylesheets and javascripts folder that you mentioned in the above html.
like
--app.js
--package.json
--views/
--node_modules/
--public/
--stylesheets/
--testing.css
--javascripts/
--jquery-1.9.1.js
--jquery-ui-1.10.2.custom.js
--testing.js
Step 2
If the above is configured correctly then you can make sure
app.use(express.static(__dirname + '/public'));
in config comes ahead of
app.use(app.router);
so that you can make assure that your line is not ignored by a 404 route handler you written in the router.
Step 3
You can inspect the rendered page with Firebug or Chrome inspector and check in the networks tab what was the response you received for the js and css files you have mentioned.
As per you question it should be 404 file not found and if its something else you should update it in the question.
Step 4
If you still cant fix the issue then you have to update the question with the node.js codes you are using. So that we could look into it.
i believe it is that "/" in start of every src line which is not making it load. for example .. use them this way
<link rel="stylesheet" href="stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="javascripts/jquery-1.9.1.js"></script>
<script src="javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/testing.js"></script>
well, these scripts and css files are in their respective folders and to reference to them, you just have to start the source from its name directly, e-g src="folder/script.css"
This was if folders are one level above from html file. for example
your index.html file is in folder1
your style.css file is in folder1 >> css
your script.js file is in folder1 >> scripts
then for this level, above suggestion will 100% work. If other types of levels are there, e-g
index.html is in folder1 >> folder2 >> index.html
style.css is in folder1 >> css
script.js is in folder1 >> js
then your src should look like
<link rel="stylesheet" href="./stylesheets/testing.css" type="text/css" media="screen" charset="utf-8"/>
<script type="text/javascript" src="./javascripts/jquery-1.9.1.js"></script>
<script src="./javascripts/jquery-ui-1.10.2.custom.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="./javascripts/testing.js"></script>
please note a "." dot in start. It means the code will reference the file from one folder behind. if the file is 2 folders behind, then use it two times, e-g ././folder1/css
hope that helps
You have to set expressJS to to use static links linking your assets or public folder that contain js and css folders.
express.static(__dirname + '/assets', { maxAge: 24*60*60*1000 }
Then use dots at the beginning of href links or simply add server url instead. e.g. :
<link rel="stylesheet" href="../css/test.css" type="text/css" >
<link type ="text/css" href="../../Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="../../Content/screen.css" rel="Stylesheet" />
<script src="/../../js/jquery.js" type="text/javascript"></script>
<script src="/../../js/jquery.cookie.js" type="text/javascript"></script>
<script src="/../../js/jquery.treeview.js" type="text/javascript"></script>
i am working with mvc. i have these css and js links in my view. it works perfectly when i work on localhost. but after publishing, it seems like these css or js files does not work. i checked authorization settings of these files and there is nothing wrong.
Try using
<link type="text/css" href="#Url.Content("~/content/jquery.treeview.css")" rel="Stylesheet"/>
Instead of giving path like this. i think you should provide the full path. After giving the full path, it will work everywhere.
<link type ="text/css" href="http://www.domain.com/Content/jquery.treeview.css" rel="Stylesheet" />
<link type ="text/css" href="http://www.domain.com/Content/screen.css" rel="Stylesheet" />
<script src="http://www.domain.com/js/jquery.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.domain.com/js/jquery.treeview.js" type="text/javascript"></script>
Can you post the URL where you are having the problem? It sounds like an issue with your relative
paths.
Here is what you can do:
Open up the site in Chrome
View page source
Up in the header, right click on the link to your CSS file and select Open Link in New Window
My guess is that you will get a Not Found error. Look at the URL to the non-existent CSS file
and see if it matches up to where you think it is.
Best,
Cynthia
The recommended way to insert URLs of contents in your MVC web application is by using Url helper.
E.g.
Css:
<link type="text/css" href="#Url.Content("~/Content/jquery.treeview.css")" rel="Stylesheet" />
Scripts:
<script src="#Url.Content("~/js/jquery.js")" type="text/javascript"></script>