Integrating JavaScript and CSS files into Spring MVC

Greetings, I am currently exploring the Spring Framework and building my first application with it. However, I have encountered a particular issue that I would appreciate some assistance with. Please excuse any errors in my English.

The problem I am facing involves including JS and CSS files in my JSP while working with Spring MVC. Unfortunately, I am receiving a ClassNotFoundException. Below is my code:

In my web.xml file:

<servlet>
    <servlet-name>appServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>appServlet</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

<servlet>
    <servlet-name>Resource Servlet</servlet-name>
    <servlet-class>org.springframework.js.resource.ResouceServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Resource Servlet</servlet-name>
    <url-pattern>/resources/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
</servlet-mapping>

Content in servlet-context (I've experimented with mvc resource using both "classpath" and not)

<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<mvc:default-servlet-handler />
<mvc:resources mapping="/resources/**" location="/resources/" />

In the JSP file:

<%@ page import="org.springframework.js.resource.*"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<c:url value='/resources/medico.css'/>" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/zapdent.js"></script>
<%-- <script type="text/javascript" src="<c:url value="/resources/spring/Spring-Dojo.js" />"> </script> --%>
</head>

I have stored my JS and CSS files in 'webapp/resources', and I believe my main issue lies with the org.springframework.js library. Although I have mapped it in the web.xml, upon running the project, I receive the following error:

SEVERE: Servlet /springsecurity threw load() exception
java.lang.ClassNotFoundException: org.springframework.js.resource.ResouceServlet
at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1295)
at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1147)
at org.apache.catalina.core.DefaultInstanceManager.loadClass(DefaultInstanceManager.java:520)
at org.apache.catalina.core.DefaultInstanceManager.loadClassMaybePrivileged(DefaultInstanceManager.java:501)
at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManager.java:120)
at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1105)
at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:1041)
at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4944)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5230)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1409)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1399)
at java.util.concurrent.FutureTask.run(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)

I have been grappling with this dilemma for about a week now and would greatly appreciate any guidance or help in resolving it. Thank you!

Answer №1

There is no need for the ResourceServlet when using the mvc:resources tag on its own. According to the javadoc, it is clearly stated that the ResourceServlet is deprecated in favor of the resource tag. It is advised not to use both simultaneously.

Answer №2

Upon examining the web.xml file, it appears that

org.springframework.js.resource.ResouceServlet
should be present, but please ensure that it is located in the classpath. You may also want to consider visiting this link and following the recommended steps:

I hope this information proves to be helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a mirrored image on an IcosahedronGeometry using three.js

My goal is to create a rotating IcosahedronGeometry in three.js and have it reflect an image on the front side of the geometry. After successfully creating the IcosahedronGeometry and implementing rotation on its axis, I encountered an issue when trying t ...

make the width of the table cell as compact as can be

I have a table that spans 100% of the width, and I'm wondering how I can set the width of columns 2 and 3 to be as small as possible without causing the content to break. I tried adding a specific width style, but I know this is not recommended for r ...

Conceal and reveal modal by leveraging the power of redux

Is there a way to toggle the visibility of a modal using an axios post method? I keep encountering the error message, 'Cannot read property 'hide' of undefined.' Any suggestions on how to fix this issue? // Function to hide the modal ...

The Nginx location directive is failing to properly handle certain URLs

Currently, I have the following setup: location /ron-swanson-quotes/ { return 301 /ron-swanson/; } Along with a SSR React app in next.js. The redirect mentioned above works perfectly for site visitors who come from an external source, but it fails whe ...

Having trouble locating the search bar element on Walmart's website?

I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...

Downloading a file utilizing Selenium through the window.open method

I am having trouble extracting data from a webpage that triggers a new window to open when a link is clicked, resulting in an immediate download of a csv file. The URL format is a challenge as it involves complex javascript functions called via the onClick ...

anticipating the completion of useEffect and subsequently retrieving object properties

I'm struggling with the following code: const [files, setFiles] = useState([]); const [greeting, setGreeting] = useState(0); const [menu, setMenu] = useState([]); const [options, setOptions] = useState([]); var customer_id = 1; useEffect(() => { ...

What is the best way to showcase a value in JavaScript using CSS styling?

I'm looking to customize the background, font style, and outline for both open and closed elements in the code snippet below: a.innerHTML = "We are Open now now."; a.innerHTML = "We are Closed, arm."; Additionally, I want to appl ...

Using data binding in VueJS to construct a dynamic URL

Exploring VueJS for the first time and it's been a great experience so far. However, I'm facing a couple of challenges with data binding. The requirement is for the customer to input an image URL, and no image should be displayed until a valid ...

jQuery is in a constant state of indecision when it comes to determining the best way to manage buttons

A straightforward scenario. When a checkbox is checked, it activates a disabled button. Unchecking the box disables the button again. Sample Code: jQuery -> $('#subscribe_button').attr('disabled','disabled') $("[name= ...

Getting the string value from query parameters can be achieved by accessing the parameters and

Currently, I am attempting to retrieve the string value stored within a class-based object variable named question5. The way I am trying to access this variable on the front-end is shown below. axios.get("http://localhost:3001/users/questionaire/?getq ...

The watch function in the scope is not triggered after initialization (ui-router)

Upon visiting a page, I encounter the following code: <div ng-if='$stateParams.show=="previous"'> From <input type="text" ng-model="year_from" /> <br/> To <input type="text" ng-model=" ...

Delete the file containing Mongoose references

I'm facing an issue with deleting questions when a survey is deleted in the Survey model. Even after deleting the survey, the question remains intact in the database. Survey Schema: let surveyModel = mongoose.Schema( { Title: String, T ...

What is the best way to eliminate the "onclick" attribute from an HTML element using JavaScript?

Is there a way to make my code only execute the onlick function after a button is pressed? I want to prevent any action from happening before that. <!-- deactivate onclick function --> <div class="boardsection2" id="2_8_7" oncl ...

Determining the dimensions of Vue slots

I am struggling with determining the height and width of slots to render images in my Perimeter component. The images should be 105x160 in size, but when I check clientWidth and clientHeight, I get 0x24. My issue seems related to this problem discussed on ...

The timing of setTimeout within the $.each function does not behave as expected

I am looking to back up a list, delete all items within it, and then append each item one by one with a delay of 1 second between them. This is the approach I have taken: var backup = $('#rGallery').html(); $('#rGallery li').remove(); ...

Swap two frames effortlessly with just a single click!

Is there a way to effortlessly change the contents of two frames with just one click? With a single click, I'd like to modify both "framename" and "framename2" by setting their href attribute to 'qwerty' and 'qwerty2' respectively ...

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance? The #custom_menu element is a full-page section with a fixed position (simil ...

Issue with font icons not displaying properly on Firefox

In Firefox, the icon is not displaying in the center, but it works fine in Opera. body { height: 100vh; display: grid; place-items: center; } .link { background-color: red; padding: 3px; display: grid; place-items: center; ...

django url path configuration

Hello, I am currently in the process of learning Django and attempting to create a basic site using django-cms. Below you will find the folder structure for my project along with some key code files: project_folder manage.py main_folder ...