I am using Spring roo and STS Insight server. I want to create a javascripts folder to add my javascript files and link them in my JSP. however, I don't know where to put the javascript files because, my JSP never can find it.
More interestingly, the dojo.js is located with no fuss. I looked in my sts directory. It appears insight.war could be housing the dojo.js. but I still can't figure out how the path is setup.
resources/dojo/dojo.js is located.
in file system, we have insight.war/dojo/dojo/dojo.js. So clearly, resources is pointed to insight.war/dojo/dojo.js. Where is this configuration? I want to change it, Preferably best load it from within my application.
Can someone help me please?
You can put all your files (images, css, javascript ...) in src\main\webapp
include a css like
<style type="text/css">
#import "${pageContext.request.contextPath}/your_dir_in_src_main_webapp/your_css.css";
</style>
include a js like
if you js contains jsp tag then
<script type="text/javascript" charset="utf-8">
<%# include file="/your_dir_in_src_main_webapp/your_js.js" %>
</script>
if you js doesnt contant jsp tag than
<script type="text/javascript" charset="utf-8" src="/your_dir_in_src_main_webapp/your_js.js"></script>
Related
Error Message From Dev Tools
The Folder Structure of the project
How I linked this
So I am trying to Link local css file to thymeleaf but it has not been working. I was wondering how to link css to thymeleaf in this case. Thank you.
You are using href="#{/css/signup.css}", but you need to use th:href like this:
<link rel="stylesheet" th:href="#{/css/signup.css}" />
I have a local server running on Tomcat.
There is currently a single landing page, which is some HTML with a simple CSS style.
My problem is, when I try to send the CSS file as a resource from my JAX-RS server, it shows up in the browser, however, it is not used by the browser to style the HTML.
Here is how it looks:
As you can see, the CSS is there, it's really simple, but it doesn't change the background.
Now, I tried to do the simplest version possible, where I just put the HTML and CSS in the same folder, and exclude the localhost request, just link it together, and it worked.
I send script files via this function:
#GET
#Path("/{scriptName}")
#Produces(MediaType.TEXT_HTML)
public InputStream getScript(#PathParam("scriptName") String scriptName) {
return ScriptService.getScript(scriptName);
}
In my HTML, the way I put it together in the <head> part is this:
<head>
<title>Home</title>
<link rel="stylesheet" href="http://localhost:8080/WebProject/scripts/mycss.css" type="text/css">
</head>
<body>
<div class="hello">
This is some text
</div>
<div class="hello2">
It is nice to meet you sir.
</div>
</body>
Do you guys have any idea on why this is happening?
Btw, as a side note, I use the same code to fetch my Vue.js scripts, and they work perfectly fine.
I've been developing a site with bootstrap 4 and linking externally to:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
However, I need to load the site locally as the network connection isn't stable. So I downloaded the full stack bootstrap-4.0.0 Source file and added it to my WebServer directory thinking all I need to do is change the link to to point to bootstrap.min.css, like this:
<link rel='stylesheet' href="http://localhost/webfiles/wp-content/themes/Cussons/bootstrap-4.0.0/dist/style.css?ver=4.9.4">
The site works, but I'm getting a 404 not found for style.css?ver=4.9.4
All permissions at set to allow full access and I cleared caches and all of the links href's appear correct, but I cant seem to get my head around why the site wont pick up the color changes I've added to files like /assests/scss/_navbar.ccss
If anyone can see whats wrong, I'll be very grateful :)
Just download the precompiled files here, place them in an accessible folder and then link them like :
<link rel="stylesheet" href="relative_path_to_css_parent_folder/css/bootstrap.min.css">
same for the js at the bottom of the body :
<script src="relative_path_to_js_parent_folder/js/bootstrap.min.js">
or
<script src="relative_path_to_js_parent_folder/js/bootstrap.bundle.min.js">
Take a look at this : How do I link to my css stylesheet for local file?
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="UI.css"> <!-- made up name-->
<script src="jquery.js"></script><!-- made up name-->
<script src="jquery.ui.js"></script><!-- made up name-->
<script src="script.js"></script>
But what if the js files are all in the projects/js/ folder? Point
your page to this location:
Assuming our HTML is in the blackjack folder, which is a sibling
folder to 'projects/js', then your script tags will look something
like this:
<script src="../js/script.js"></script>
Notice the ../? This references the parent folder of the one the
document is in. We go up one level to where the js folder is.
In spring-boot application, pointed all css, js, images are in below structure:
JSP page is loading with all css/js/images when the URL is like this http://localhost:8080/request/
But when the URL is like this http://localhost:8080/request/rt/home
(css/image/js are not loading).
When I click the url of bootstrap.min.css from view source page, it is showing like below:
http://localhost:8080/request/rt/public/css/bootstrap.min.css
"rt" is adding in between the url.
How to omit the "rt" from path.
so that will get path like http://localhost:8080/request/public/css/bootstrap.min.css
It will load css/js/images
Please suggest
Without seeing your jsp, according to your statements of how it behaves, I would say that you are declaring your stylesheet and resources reference this way, without starting by a /:
<link href="public/css/bootstrap.min.css" rel="stylesheet">
<script src="public/css/bootstrap.min.js"></script>
This means that the resources are relative to the virtual directory of the url bar of the browser.
You should declare your references this way:
<link href="/request/public/css/bootstrap.min.css" rel="stylesheet">
<script src="/request/public/css/bootstrap.min.js"></script>
To avoid hardcoding the contextpath, you could use:
<link href="${pageContext.request.contextPath}/public/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/public/css/bootstrap.min.js"></script>
Whicho would resolve your context name
Try this way
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
or
<link href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css" rel="stylesheet">
I'm porting an old site to a new template and am having problems with the Windows 2008 rewrite module. The link I'm trying to rewrite looks like this:
http://ltweb2008.serveronline.net/product.php?pID=75
and brings up the page just fine. Then I apply the new URL and it loads the proper content, but doesn't load the template's style.css file anymore.
http://ltweb2008.serveronline.net/product/75/any-text-here
The problem seems to be that the company who made the template (canvas) put the main .css file in the root directory, but loaded all the rest in /css. Now I can't get the main .css file to load using the rewrite and when I move it down to /css it only displays a blank page, though when I check out the page source it's all there.
With this the page shows but is not using style.css (with rewrite):
<link rel="stylesheet" href="style.css" type="text/css" />
With any of these the page is completely blank (with rewrite):
<link rel="stylesheet" href="/style.css" type="text/css" /> OR
<link rel="stylesheet" href="/css/style.css" type="text/css" /> OR
<link rel="stylesheet" href="http://ltweb2008.serveronline.net/style.css" type="text/css" />
I'm using this for the Pattern:
^product/([0-9]+)/([^/]+)$
And the Rewrite URL:
/product.php?pID={R:1}
Does anyone know what I'm missing?
one solution is that use absolute path (ex /css, or /js rather than just css/, /js but this is not looks a reliable solution since we've to change it on all files,
This is because your relative URIs have their base changed. Originally, the base is / when the page is /product.php?id=75, and the browser properly fills in relative links with the / base. But when the browser goes to a page like /product/75/any-text-here the base suddenly becomes /product/ and it tries to append that in front of all relative URLs and thus none of them load.
You can either make your links absolute, or change the URI base in the header of your pages (inbetween the <head> </head> tags):
<base href="/">
Maybe you need one thing, maybe both, I didn't test, but this solved it for me:
1.) ADD THIS in page_load :
Page.Header.DataBind() ' Needed because we have <%# %> codeblocks in the HEADER (seems header only causing this) WITH the AjaxControlToolkit running on the page. That's what broke it until we put in this and put in the pound instead of = sign in the html.
2.) Add this in ASPX:
<%# MasterType VirtualPath="~/dir1/dir2whateverdir/MasterPage.master" %>