I have a spring boot (I use Thymeleaf for templating) project where I want to use some jQuery libraries.
Unfortunately, the webjars aren't loading at all. I have tried many configuration but all of them failed.
Here is the code snippet of my HTML page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<title>JAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.js" type="text/javascript"
th:src="#{/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js}"></script>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<link href="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
</head>
I have added them in the pom file:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>jquery</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-file-upload</artifactId>
<version>9.10.1</version>
</dependency>
But when calling the page I got a 404 on jquery.min.js and jquery.fileupload.min.js.
GET http://localhost:8888/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js
2015-09-21 02:02:04.059 home:9
GET http://localhost:8888/webjars/jquery/2.1.4/jquery.min.js 404 (Not Found)
You are referencing jquery library correctly. Maybe you are missing resource handler configuration.
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
Or if you use JavaConfig
#Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
Webjars documentation
If this will not work, please check if you have webjars on classpath (open your application JAR in 7Zip and check if webjars resources are inside it.)
After inspecting the webjar for jquery, I got this working by adding a "dist" subpath.
<script src="webjars/jquery/2.1.4/dist/jquery.min.js" type="text/javascript"></script>
Additional answer found on one blog:
When using Spring Framework version 4.2 or higher, it will
automatically detect the webjars-locator library on the classpath and
use it to automatically resolve the version of any WebJars assets.
In order to enable this feature, we’ll add the webjars-locator library
as a dependency of the application:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
In this case, we can reference the WebJars assets without using the
version; (...)
if you use servlet 3.x just add :
1- using java config :
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);
registry.setOrder(1);
}
}
2- or xml config :
<mvc:resources mapping="/webjars/**" location="/webjars/">
<mvc:resource-chain resource-cache="false" />
</mvc:resources>
The webjars dependencies should be available on the spring boot classpath, so you should try referencing the webjars using the src attribute like so:
<script src="webjars/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js"></script>
<link href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" media="screen" />
<link href="webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
I ended up doing a mvn clean install (from cmd prompt) to get the target cleaned and all the lib/jars populated correctly. I am using Spring boot with Intelij.
After inspecting the webjars for jquery, I got this working by adding a "THE VERSION OF JQUERY LIBRARY USED IN POM.XML FILE"
<script src = "/webjars/jquery/3.1.0/jquery.min.js"></script>
(in my case I used 3.1.0 version, used that version only that you are using).
Make sure if you have updated the version of bootstrap or jquery when you are adding the dependencies, you should update the URL's in the jsp's or html's with the correct version of bootstrap and jquery.
Related
Is it possible to reference webjar dependencies during compile time in IntelliJ? Imagine I'm playing with some CSS or HTML and making some little adjustments.. I don't want to clean -> rebuild project each time I change font-size or color or etc. I just want to preview them on the fly, in IntelliJ.
Assuming you have webjars Maven dependencies:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>${bootstrap.version}</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>${jquery.version}</version>
</dependency>
You could refer to your resources by putting the following code in your templates within <head></head>:
<link href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet" media="screen"
th:href="#{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}"/>
<script src="webjars/jquery/3.2.0/jquery.min.js"
th:src="#{/webjars/jquery/3.2.0/jquery.min.js}"></script>
Attributes href and src will be used in compile time, while attributes th:href and th:scr would be used by Thymeleaf in run time.
In the same way you could use your own stylesheets or scripts:
<link href="../../static/css/app.css" th:href="#{css/app.css}" rel="stylesheet" media="screen"/>
<script src="../../static/js/app.js" th:src="#{js/app.js}"></script>
I have a Spring Boot Application. I am trying to load to my HTML file a CSS file, but probably I am doing something wrong. In Spring MVC Project I've done something like this:
In HTML file I added the following line:
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet">
And in mvc-dispatcher-servlet.xml I added following code:
<mvc:resources mapping="/resources/**" location="/resources/"
cache-period="31556926"/>
<mvc:annotation-driven />
And everything worked perfect.
Now I'm using thymeleaf templating language and load my CSS file like that:
<link rel="stylesheet" type="text/css" th:href="#{/assets/css/style.css}" />
My project files hierarchy is following:
In current project I don't have WEB-INF directory so I don't have such a files like mvc-dispatcher-servlet.xml or web.xml so I don't know if I should or where I should paste that code with resources mapping. Im completely new to Spring so I apologise for my lack of knowledge.
Any tips and solutions will be much appreciated.
I am trying to render JSP in a Spring 3.2 using annotation driven configuration, but the JSP renders as a string and is not evaluated.
I am using the maven jetty plugin to run the webapp in development. So it seems as if everything should "just work".
The dependencies I am including to use JSP are
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
The bean to configure JSP is
#Configuration
public class WebAppConfiguration {
#Bean
public InternalResourceViewResolver internalResourceViewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setPrefix("/views/");
resolver.setSuffix(".jsp");
return resolver;
}
}
The controller is pretty straight forward
#Controller
public class RootController {
#RequestMapping(value = "/login")
public String login() {
return "login";
}
and the JSP is also pretty easy
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head></head>
<body>
<%= "Hello World" %>
${ "Hello World" }
<form name="auth" action="<c:url value='j_spring_security_check' />" method="POST">
<label>Username: <input type="text" name="j_username"></label>
<label>Password: <input type="password" name="j_password"></label>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
As you can see from the image the JSP is not being evaluated. Is there anything I need to do to tell JSP to be evaluated when rendered.
Edit 1
So just for a little extra information I used the Resthub archetype resthub-mongodb-backbonejs-archetype to bootstrap this project, which uses a WebAppInitializer rather than the older web.xml, and it uses new annotation driven beans rather than the xml beans.
EDIT 2
I have been smashing my head on this for all to long so I put the project on github https://github.com/austinbv/calendar/. Since I do not know what is important and what is not.
Thanks for the help
#austinbv Please use the SPRING LINK to check the setup. (As #Rohit has pointed you above - the missing piece)
I had the same problem when using spring boot. Adding these dependencies to the project pom.xml resolved the issue:
<dependency>
<groupId>tomcat</groupId>
<artifactId>jasper-compiler</artifactId>
<version>5.5.23</version>
</dependency>
<dependency>
<groupId>tomcat</groupId>
<artifactId>jasper-runtime</artifactId>
<version>5.5.23</version>
</dependency>
<dependency>
<groupId>tomcat</groupId>
<artifactId>jasper-compiler-jdt</artifactId>
<version>5.5.23</version>
</dependency>
The above given issue fixed for me after making following change in the "web.xml"
The spring servlet needs to be the default servlet. ie mapped to / and not /*.
Ref link: https://code-examples.net/en/q/b49ce1
You need to specify the appropriate view class
public InternalResourceViewResolver internalResourceViewResolver() {
InternalResourceViewResolver resolver = new InternalResourceViewResolver();
resolver.setViewClass(org.springframework.web.servlet.view.JstlView.class);
resolver.setPrefix("/views/");
resolver.setSuffix(".jsp");
return resolver;
}
I do not know how much actual will be my answer, but I had exactly the same issue (Spring + boot + maven + tomcat).
I solved it by removing the scope-provided from tomcat.embed dependence. So, my dependence now looks like this:
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
Because JSP does not obey MVC pattern :P
I am new to spring and am trying it.
I have a jsp file which includes css and images as follows
<link href="css/style.css" rel="stylesheet" type="text/css" />
Now i have a url path as /localhost/myapp/test/tst which is mapped to a controller which then forwards it to view jsp
view.jsp is present it
/web-inf/jsp/view.jsp
But when hit the path /localhost/myapp/test/tst the css and images path gets resolved to
/localhost/myapp/test/tst/css/style.css
Actaully i want it to come as /localhost/myapp/css/style.css
css and html are present in root of webapp
How i have following in my spring config
<mvc:annotation-driven />
<mvc:resources mapping="/images/**" location="/images/" />
<mvc:resources mapping="/css/**" location="/css/" />
Your CSS href is currently relative to your page, you need to make it relative to the server root by adding a leading slash (plus context, etc). Its also a good idea to add the contextPath so that if/when you change the webapp name or deploy it as a root webapp, the resources still work.
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
could you please explain how to set the skin for primefaces 1.1 ..
you can try to add
<h:head>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/themes/redmond/skin.css" />
</h:head>
to your page and
<context-param>
<param-name>primefaces.skin</param-name>
<param-value>none</param-value>
</context-param>
to web.xml
From http://www.primefaces.org/themes.html:
Installing Themes
Applying a theme from Theme Gallery to
your PrimeFaces project is very easy,
you just need to download the theme
jar, add it your classpath and
configure PrimeFaces to use it.
1) You can either download the theme
manually from this page or using maven
via;
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>aristo</artifactId>
<version>1.0.0</version>
</dependency>
2) Next step is setting
primefaces.THEME parameter with the
theme name, you can also use an EL
expression for dynamic themes. view
plaincopy to clipboardprint?
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>aristo</param-value>
</context-param>
That's it!
I'm currently facing a problem like this, bhut have no real solution for that yet...