Search code examples
spring-bootwebjars

Integrating JQuery in Spring Boot

I am having problem of integrating JQuery into Spring boot project (New to Spring). I tried to follow the documentation but it still does not work. I am using Java/Spring + Thymeleaf. Documentation says that I have to do the following:

  1. The WebJar needs to be a dependency of your application
  2. The WebJar needs to be in your application's running CLASSPATH
  3. Your container, web framework, or application needs to serve static assets from Jar files

Reference: http://www.webjars.org/documentation#springboot

Here is my pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>org.springframework</groupId>
<artifactId>gs-securing-web</artifactId>
<version>0.1.0</version>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.2.RELEASE</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <!-- tag::security[] -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <!-- end::security[] -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.security</groupId>
        <artifactId>spring-security-test</artifactId>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>org.webjars</groupId>
        <artifactId>jquery</artifactId>
        <version>3.2.0</version>
    </dependency>  
</dependencies>

<properties>
    <java.version>1.8</java.version>
</properties>
<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>
</project>

Then I also added resource handlers to my Config class which extends WebMvcConfigurerAdapter class. I added the following method:

        @Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}

Then in my HTML file I have the following lines:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>Hello World!</title>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        alert("JQuery works");
    });
    </script>
</head>
<body>
    <h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="Sign Out"/>
    </form>
     <script type="text/javascript" src="webjars/jquery/3.2.0/jquery.min.js"></script>
</body>
</html>

But JQuery still is not loading. It says that it is undefined. Can someone tell me what's wrong?

Solution

  • Okay I found out the problem. Everything was correct about configuration, but I had to add <script type="text/javascript" src="webjars/jquery/3.2.0/jquery.min.js"></script> before document ready function. Can someone explain why is that so?