I'm using a layout where a number of javascript libraries are included at the bottom the file, just above the close of the body tag. What I want to do is add some custom javascript below them on various pages but not all pages. Is there some equivalent of
<g:render template="customjs"/>
I can use in the layout gsp that only renders the template if it exists and does not crash on pages without the _customjs.gsp?
The answer is here https://stackoverflow.com/a/3394720/1790092
If your controller name is "MyJsController"
Consider wrapping this code into a TagLib for better reuse
<g:set var="controller" value="myJs" />
<g:set var="template" value="customjs" />
<g:set var="patternResolver" value="${new org.springframework.core.io.support.PathMatchingResourcePatternResolver()}" />
<g:set var="pathPattern" value="grails-app/views/${controller}/_${template}.gsp" />
<g:if test="${patternResolver.getResources(pathPattern)}">
<g:render template="/${controller}/${template}" />
</g:if><g:else>
not found!
</g:else>
Related
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>
In my Layout.cshtml file I have the following line:
<link rel="stylesheet" href="~/Content/bootstrap.css" />
My assumption was that since I did not include Url.Content() call, it would actually just render what I wrote but not expand the virtual URL automatically. This assumption is wrong - the generated HTML does include the correct path to the file, not the virtual path I entered.
If I wrap the <link> in <script>
<script type="text/html">
<link rel="stylesheet" href="~/Content/bootstrap.css" />
</script>
then the URL is not expanded.
Which part of ASP.NET MVC does this automatic parsing of HTML and is there a way to control it?
This was a new feature included in Razor2 and ASP.NET MVC 4 and was designed to make life easier by not having to use Url.Content everywhere.
http://www.davidhayden.me/blog/asp.net-mvc-4-the-new-tilde-slash-feature-in-razor-2
The feature only works inside standard HTML attributes and that's why you don't get it inside your <script> tag or anywhere else.
You could use a simple output write to work around this:
<link rel="stylesheet" href="#("~/Content/bootstrap.css")" />
I am implementing a web application using ASP.NET MVC3. In the application I want to add the option of switching between CSS files (for themes) based on clicking some links. I did some research and I came up with the following:
To pass data to site.master, the good solution is to create an abstract controller and inherit that into the other controllers that have site.master as their template, according to this article: Passing Data to View Master Pages
I can pass a viewbag message to the link which controls the css file URL to set the current css file to use, based on the code that I am seeing being passed to scripts at the top of the site.master page:
script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"
So I created an abstract controller, ApplicationController, with the following method:
public ApplicationController()
{ViewBag.NewMessage = "../../Content/Site2.css";}
And in the site.master, I included this link:
<link href="<%: (string) ViewBag.NewMessage %>" rel="stylesheet" type="text/css" />
However, that doesn't seem to be working, as it is being interpreted as:
<link href="<%: (string) ViewBag.NewMessage %>" rel="stylesheet" type="text/css" />
And only when I remove the quotation marks:
<link href=<%: (string) ViewBag.NewMessage %> rel="stylesheet" type="text/css" />
is it being interpreted correctly (and the webpage gets rendered with the correct css), except that it violates html standards:
<link href=../../Content/Site2.css rel="stylesheet" type="text/css" />
Any suggestion about how to go tackling this problem or is there a more elegant solution I'm missing? I was going to proceed and implement variables in the ApplicationController that get selected based on links the user clicks at the top of the page, to switch between css styles.
Thank you!
Check to make sure your <head> tag does not have runat="server".
After making this change, be sure to check your script and css tags. This change can break the paths if you use the ~/ to ref app root. To help with this, use the Url.Content(...) helper.
Having to deal with URL rewriting, I decided to programmatically add CSS references rather than relying on the automatic behavior of ASP.NET to add all CSS files within a theme automatically to the <head> of an ASPX page.
I suceeded in adding the CSS file programmatically by using
<link type="text/css" rel="stylesheet" runat="server" id="CssFile" />
and setting the actual URL it in code behind.
My question is:
Is there a way to prevent the ASP.NET "engine" from automatically adding all CSS files into the <head> of my ASPX/master page?
(Of course, I still could go with my own folders and completely drop the App_Themes concept)
You can prevent this feature by adding the following attributes to the Page directive:
<%# Page ... EnableTheming="false" Theme="" StylesheetTheme="" %>
I do not believe you can tell a skin to not include the files within it, that was the killer for us when it came to using them as it referenced all the css files not just the ones we needed and we needed maximum efficiency.
<head runat="server" visible="false" />
<%# Master Language="C#" AutoEventWireup="true" Inherits="Front" Codebehind="Front.master.cs" **EnableTheming="false"** %>
was my solution to getting around the problem.
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>