My JSP page is working but it appear without css style, somebody had problem like this ?
I declared mvc resources like:
<mvc:resources mapping="/resources/**" location="/resources/css/" />
And in JSP page:
<head>
<title>Auctions site</title>
<link href="<c:url value="/resources/css/mystyle.css" />" rel="stylesheet">
</head>
Files structure :
enter image description here
Related
I'm using Thymeleaf for layouts in my project, but unable to get the page title dynamic.
Layout.jsp
<head th:fragment="headerfragment">
<title th:text="#{page-title}"></title>
<!-- Bootstrap Core CSS -->
<link th:href="#{/resources/css/bootstrap.min.css}" rel="stylesheet"
type="text/css" />
</head>
Page.jsp
<head th:include="layout :: headerfragment"></head>
When the final page is rendered i see title as page-title not the actual text
In my controller I set the page-title attribute
modelMap.addAttribute("page-title", "Home");
I might not be doing it right as i'm new to thymeleaf. Please help me to find out the solution.
The correct syntax is ${page-title} so in your example it should be changed to <title th:text="${page-title}"></title>
I'm having trouble with loading CSS and images and creating links to other pages when I have a servlet forward to a JSP. Specifically, when I set my <welcome-file> to index.jsp, the CSS is being loaded and my images are being displayed. However, if I set my <welcome-file> to HomeServlet which forwards control to index.jsp, the CSS is not being applied and my images are not being displayed.
My CSS file is in web/styles/default.css.
My images are in web/images/.
I'm linking to my CSS like so:
<link href="styles/default.css" rel="stylesheet" type="text/css" />
I'm displaying my images as follows:
<img src="images/image1.png" alt="Image1" />
How is this problem caused and how can I solve it?
Update 1: I've added the structure of the application, as well as some other information that might help.
The header.jsp file is the file that contains the link tag for the CSS. The HomeServlet is set as my welcome-file in web.xml:
<welcome-file-list>
<welcome-file>HomeServlet</welcome-file>
</welcome-file-list>
The servlet is declared and mapped as followes in the web.xml:
<servlet>
<servlet-name>HomeServlet</servlet-name>
<servlet-class>com.brianblog.frontend.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Update 2: I found the problem finally - my servlet was mapped incorrectly. Apparently when setting a Servlet as your <welcome-file> it can't have a URL pattern of /, which I find sort of weird, because wouldn't that stand for the root directory of the site?
The new mapping is as follows:
<servlet-mapping>
<servlet-name>HomeServlet</servlet-name>
<url-pattern>/HomeServlet</url-pattern>
</servlet-mapping>
All relative URLs in the HTML page generated by the JSP file are relative to the current request URL (the URL as you see in the browser address bar) and not to the location of the JSP file in the server side as you seem to expect. It's namely the webbrowser who has to download those resources individually by URL, not the webserver who has to include them from disk somehow.
Apart from changing the relative URLs to make them relative to the URL of the servlet instead of the location of the JSP file, another way to fix this problem is to make them relative to the domain root (i.e. start with a /). This way you don't need to worry about changing the relative paths once again when you change the URL of the servlet.
<head>
<link rel="stylesheet" href="/context/css/default.css" />
<script src="/context/js/default.js"></script>
</head>
<body>
<img src="/context/img/logo.png" />
link
<form action="/context/servlet"><input type="submit" /></form>
</body>
However, you would probably like not to hardcode the context path. Very reasonable. You can obtain the context path in EL by ${pageContext.request.contextPath}.
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/default.css" />
<script src="${pageContext.request.contextPath}/js/default.js"></script>
</head>
<body>
<img src="${pageContext.request.contextPath}/img/logo.png" />
link
<form action="${pageContext.request.contextPath}/servlet"><input type="submit" /></form>
</body>
(which can easily be shortened by <c:set var="root" value="${pageContext.request.contextPath}" /> and used as ${root} elsewhere)
Or, if you don't fear unreadable XML and broken XML syntax highlighting, use JSTL <c:url>:
<head>
<link rel="stylesheet" href="<c:url value="/css/default.css" />" />
<script src="<c:url value="/js/default.js" />"></script>
</head>
<body>
<img src="<c:url value="/img/logo.png" />" />
link
<form action="<c:url value="/servlet" />"><input type="submit" /></form>
</body>
Either way, this is in turn pretty cumbersome if you have a lot of relative URLs. For that you can use the <base> tag. All relative URL's will instantly become relative to it. It has however to start with the scheme (http://, https://, etc). There's no neat way to obtain the base context path in plain EL, so we need a little help of JSTL here.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%#taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="req" value="${pageContext.request}" />
<c:set var="uri" value="${req.requestURI}" />
<c:set var="url">${req.requestURL}</c:set>
...
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<link rel="stylesheet" href="css/default.css" />
<script src="js/default.js"></script>
</head>
<body>
<img src="img/logo.png" />
link
<form action="servlet"><input type="submit" /></form>
</body>
This has in turn (again) some caveats. Anchors (the #identifier URL's) will become relative to the base path as well! You would like to make it relative to the request URL (URI) instead. So, change like
jump
to
jump
Each way has its own pros and cons. It's up to you which to choose. At least, you should now understand how this problem is caused and how to solve it :)
See also:
Is it recommended to use the <base> html tag?
I faced similar issue with Spring MVC application. I used < mvc:resources > tag to resolve this issue.
Please find the following link having more details.
http://www.mkyong.com/spring-mvc/spring-mvc-how-to-include-js-or-css-files-in-a-jsp-page/
You must analyse the actual HTML output, for the hint.
By giving the path like this means "from current location", on the other hand if you start with a / that would mean "from the context".
Your welcome page is set as That Servlet . So all css , images path should be given relative to that servlet DIR . which is a bad idea ! why do you need the servlet as a home page ? set .jsp as index page and redirect to any page from there ?
are you trying to populate any fields from db is that why you are using servlet ?
If you are using Spring MVC, then you need to declare default action servlet for static contents. Add the following entries in spring-action-servlet.xml. It worked for me.
NOTE: keep all the static contents outside WEB-INF.
<!-- Enable annotation-based controllers using #Controller annotations -->
<bean id="annotationUrlMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">
<property name="order" value="0" />
</bean>
<bean id="controllerClassNameHandlerMapping" class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
<property name="order" value="1" />
</bean>
<bean id="annotationMethodHandlerAdapter" class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
As for your update, I was confused for the reasoning behind in. Dug a little deeper and found this gem:
yoursite.com becomes yoursite.com/
yoursite.com/ is a directory, so the welcome-file-list is scanned
yoursite.com/CMS is the first welcome-file ("CMS" in the welcome-file-list), and there is a mapping of /CMS to the MyCMS servlet, so that servlet is accessed.
Source: http://wiki.metawerx.net/wiki/HowToUseAServletAsYourMainWebPage
So, the mapping then does make sense.
And one can now freely use ${pageContext.request.contextPath}/path/ as src/href for relative links!
short answer - add following line in the jsp which will define the base
base href="/{root of your application}/"
Below code worked for me.
instead of
use
<%# include file="styles/default.css"%>
You can try out this one as well as. Because this worked for me and it's simple.
<style>
<%# include file="/css/style.css" %>
</style>
I have a problem loading css for different URL.
This is my current structure:
-webapp
|--resources
|---css
|---generalize.css
|---js
|---images
|--WEB-INF
|---views
|---login
|---dashboard
This is my spring configuration to look for the resources:
<mvc:resources mapping="/resources/**" location="/resources/" />
And in the jsp page, I try to load it as:
<link href="<c:url value="resources/css/generalize.css" />" rel="stylesheet" type="text/css" />
If I have an url like localhost:8888/myapp/login or localhost:8888/myapp/dashboard, the css will apply fine. But when I try to map the dashboard page with the url localhost:8888/myapp/user/dashboard, the page loses its css style. Would anyone help to explain how would be the correct way to load the css (or using the resources)?
I have tried to prepend the contextPath as below but it does not work as well.
<link href="<c:url value="${pageContext.request.contextPath}/resources/css/generalize.css" />" rel="stylesheet" type="text/css" />
Simply use context relative path by appending / in the beginning.
<c:url value="/resources/css/generalize.css" />
You don't need to append context path in the beginning.
I ran into an issue with linking my css files in master page.
<SharePoint:CssRegistration ID="StyleSheet1" Name="~sitecollection/_catalogs/masterpage/Resources/css/quack_1200.css" After="corev15.css" runat="server" />
<SharePoint:CssRegistration ID="StyleSheet2" Name="~sitecollection/_catalogs/masterpage/Resources/css/main.css" After="corev15.css" runat="server" />
These files are not being loaded. When I access the console in browser it doesn't show any errors and when I investigate the HTML it does not show the CSS files.
However if I access the files on the URL they do exist.
This is the deployment XML definition.
<File Path="Resources\css\main.css" Url="masterpage/Resources/css/main.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
<File Path="Resources\css\quack_1200.css" Url="masterpage/Resources/css/quack_1200.css" IgnoreIfAlreadyExists="TRUE" Type="GhostableInLibrary" />
If I type the whole URL I am able to access the files.
http://[computer
name]/sites/PCF/_catalogs/masterpage/Resources/css/quack_1200.css
http://[computer
name]/sites/PCF/_catalogs/masterpage/Resources/css/main.css
Could you please help me on resolving this issue.
Thank you
The problem is that CssRegistration doesnt handle the ~sitecollection token.
I havent tested this, but try to add:
<link rel="stylesheet" type="text/css" href="resources/css/main.css" />
If you cant figure out how to build up your url, you could always add the css files with javascript / jQuery.
var linkTag = '<link href="' + _spPageContextInfo.siteAbsoluteUrl + '/_catalogs/masterpage/Resources/css/quack_1200.css" rel="stylesheet" type="text/css"/>';
$(document).ready($('head').append(linkTag);
Where you are adding your css files in master page or in html page?In SP2013 you cannot do any modifications directly on master page. What ever you want to do, you should do in a html page only. In html page add your css file like below.
<link rel="stylesheet" type="text/css" href="../../../../images/MyFolder/css/styles.css" />
If you save this html page and see in the master page it will render like below
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/images/MyFolder/css/styles.css %>" runat="server" after="SharepointCssFile"/>
Note : if your changes not applying in your master page try to convert the associated html file once again. Check this MSDN Link
Solved with:
<link rel="stylesheet" type="text/css" href="Resources/css/quack_1200.css" />
<link rel="stylesheet" type="text/css" href="Resources/css/main.css" />
</head>
This question already has answers here:
ASP.Net Master Page and File path issues
(10 answers)
Closed 9 years ago.
We're having some trouble with including javascript in masterpages. The "~/" root shortcut doesn't seem to work, and so we're having to manually enter in the path to the javascript from where it will be used, for example: "../../tooltip.js"
However, the problem is that if the nested page is in a different path, this approach does not work as the path stays the same despite the nested page being in a different location - any solutions on how to get the path automatically working like it does for the css files?
Thanks!
The ~/ is a special entity in ASP.NET which represents the "application root". The translation only happens when you pass that URL through an ASP.NET server control, such as <asp:Image runat="server" ImageUrl="~/path..." />. Trying to use it in something that is passed as literal text directly to the client, such as ` will be rendered exactly that in the browser.
There are a few solutions to this:
Put your scripts in a predictable place relative to the domain root, such as domain.com/scripts/script.js, and you can refer to it as /scripts/script.js. The preceding / tells the client (browser) it is an absolute path from the domain root.
Use Page.ResolveClientUrl to render the correct path (<%=Page.ResolveClientUrl("~/script./js")%>)
Create your own server control which handles the ~/ resolution.
Embed the script as an assembly resource.
Cory Larson recommends:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/tooltip.js") %>"></script>
Try
<script type="text/javascript" src=<%=Request.ApplicationPath+"/Scripts/Script_Name"%>></script>
I've been using url rewriting and "~" occasionally chokes on special characters in the url even when they are encoded.
If the script tag is in the HEAD element just use a path that is relative to the master page and asp.net will automatically fix the reference for you. Just make sure that the HEAD element has the runat=”server” attribute.
This also works really well for CSS files. It's the only way I've been able to get them to resolve in the VS.NET designer.
Here is a sample from my project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/960.css" />
<link rel="stylesheet" type="text/css" href="../styles/default.css" />
<link rel="stylesheet" type="text/css" href="../styles/buttons.css" />
<script type="text/javascript" src="../jQuery/jquery-1.3.2.js"></script>
</head>
Linked style sheets can be put within the header (with runat="server") and use a ~ to resolve to the root. However, Javascript files cannot be referenced this way. One additional way to add scripts is with a script manager in the body.
<html>
<head runat="server">
<title>title</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.custom.min.js" />
</Scripts>
</asp:ScriptManager>
</body>
</html>
As answered # [Include Javascript adn CSS][1]
http://www.codeproject.com/Articles/404942/Include-JavaScript-and-CSS-on-your-MasterPage
For CSS files:
<link href="<%# ResolveUrl("~/") %>css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
For JavaScripts:
<script src="<%# ResolveUrl("~/") %>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Can you explain what you mean by the "~/" isn't working? It should be exactly what you're looking for. You might check that your head tag has the runat="server" attribute, since that might prevent the "~/" from working.