spring causing css and javascript issues

*strong text*I'm a beginner in the world of Spring and I've encountered some difficulties when it comes to linking CSS and JS files. Here's an excerpt from my jsp file:

<html lang="es-MX">
<head>
    <title>Cambio Musical</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- These are the problematic CSS and JS files -->
    <link href="reset.css" rel=stylesheet>
    <link href="menuSuperior.css" rel=stylesheet>   
    <link href="style.css"  rel=stylesheet> 
    <link href='http://fonts.googleapis.com/css?family=Skranji' rel='stylesheet'>
    <link rel="stylesheet"  href="estilo.css" />
     <!-- The main CSS file -->
    <link href="reloj.css" rel=stylesheet" />
    <link rel="shortcut icon" href="logo.ico">
    <!--[if lt IE 9]>
            <script src="assets/js/html5.js"></script>
    <![endif]-->
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="scriptboton.js"></script>
    <!-- These are the problematic CSS and JS files -->
</head>
<body>
    <div id="contenedor">
        <!-- Header starts here -->
        <div id="cabecera">
            <div id="logo"><img src="logo.png" width=100px height=60px>
                <div id='cssmenu'>
                    <ul>
                        <li class='has-sub'><a href='index'><span>Home</span></a></li>
                        <li class='has-sub'><a href='getParList'><span>Participants</span></a>
                            <ul>
                                <li class='has-sub'><a href='participants'><span>Add Participant</span></a></li>
                                <li class='has-sub'><a href='getParList'><span>Show Participants</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'><a href='devent'><span>Events</span></a>
                            <ul>
                                <li class='has-sub'><a href='event'><span>Add Event</span></a></li>
                                <li class='has-sub'><a href='devent'><span>Show Events</span></a></li>
                            </ul>
                        </li>
                        <li class='has-sub'><a href='searchmusic'><span>Music</span></a>
                            <ul>
                                <li class='has-sub'><a href='music'><span>Add Music</span></a></li>
                                <li class='has-sub'><a href='searchmusic'><span>Show Music</span></a></li>
                            </ul>
                        </li>
                        <li class="has-sub"><a href="/result"><span>Results</span></a>
                            <ul>
                                <li class='has-sub'><a href='result'><span>Overall Results</span></a></li>
                                <li class='has-sub'><a href='sexRes'><span>Results By Gender</span></a></li>
                                <li class='has-sub'><a href='ageRes'><span>Results By Age</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

This is how my Dispatcher Servlet looks like:

<!-- Declaring base package -->
<context:component-scan base-package="cambio.packs" />

<!-- Adding view resolver to display JSPs on the browser -->
    <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping"/>
    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"/>
<bean id="viewResolver"
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
</bean>

And this is the error message shown in the reference: Apache Tomcat/7.0.22 - Error Report

HTTP Status 404 -

Type State Report

Message

Description The requested resource () is not available.

Apache Tomcat/7.0.22

This is my XML configuration:

<display-name>ElCambio</display-name>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
    <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>        

spring org.springframework.web.servlet.DispatcherServlet 2

<servlet-mapping>
    <servlet-name>spring</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping><listener>
      <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

Answer №1

Make sure to include the <mvc:resources/> tag in your Spring configuration to specify the location of your static resources such as CSS, JavaScript, and images.

Learn more about this here

<mvc:resources mapping="/resources/**" location="/public-resources/" />

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

Replica of Spotify - Bottom Section - HTML and CSS Styling

I have been attempting to replicate the Spotify interface using only HTML and CSS. While I have successfully created the player section, I am struggling to center the player and incorporate the other two details as shown in the attached images. The 'G ...

Removing an item from a JSON list

Is there a way to remove a specific element (e.g. by using its id) from a JSON array? A delete button can be used to achieve this task, passing the id as a parameter. For instance, how would one go about deleting an item with an id of 2 : Note: The id n ...

A JavaScript syntax problem arises when attempting to fetch data (an object) from a Laravel controller

Encountering a JavaScript syntax error in my .blade.php file when trying to access $data->modal This is my controller function: public function buku_all($page, $modal) {$data = (object) [ 'sidebar' => "pelayanan", ...

Turn off auto-suggestion feature on the iPad and iPhone keyboard using JavaScript

I'm facing a challenge where I want to turn off the predictive suggestions and autocorrect feature on the iPad keyboard. This image is just for display purposes and not from my actual project. I need to hide the highlighted suggestion bar, and I am u ...

The buttons are off-center on the page when the screen width is below 1199px, they should be centered instead of aligned to the

Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered. You can vie ...

Is there a way to position the image at the exact center of the column?

Currently, I am attempting to design a container that includes an image on the left, a title and description in the center, and a button on the right. However, I am facing difficulties centering the image in the first column and the button in the last colu ...

Server experiencing problem with image uploads

Need Assistance with the Following Issue: Here is the code snippet in ASPX: <input type="Button" id="BtnUpload" class="button1" value="Upload Image" onclick="clickFileUpload();" /> JavaScript function on the ASPX page: function UploadImage(path) ...

Circling the central point by utilizing the device's positioning

I have been attempting to recreate the functionality of Google's Cardboard Demo "Exhibit" using three.js. I started with the example provided on the Chrome Experiments website and added code to draw a simple triangular pyramid in the init method: fun ...

Creating CSS Effects for Text Hover and Transition

Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...

Tips for overriding a CSS class without impacting other classes sharing the same name

Within a page filled with various widgets, I am facing an issue where I need to override the container class for a specific widget. However, the problem is that all widgets with the same class name are being impacted. Attached below is a screenshot from in ...

The vertical scrolling feature will come to a halt once it reaches a specific limit

Check out this website: How can I prevent the vertical scroll from continuing past the orange footer boundary? ...

Unexpected outcomes when trying to sort and paginate React-Table

Experiencing unexpected results with react-table integration for pagination and sorting. Merged examples from the react-table repository. Encountering an issue where table hooks reset the page index on re-render, causing fetchData to be called twice during ...

Combine three images and position them in the center of a flexible container

Looking for assistance with overlapping 3 images and centering them within a twitter bootstrap row-fluid div. Here is an example of the desired outcome: The solution can incorporate javascript, however it is preferred to avoid it. It is also important tha ...

What is the best way to adjust the padding during a scaling transformation?

Currently, I am working on a scaling transform where the origin is centered horizontally. However, I have noticed that when I scale the element, the vertical padding appears to be scaled, but the horizontal padding remains unchanged. How can I ensure that ...

An error message occurred while using Indexed Db in Firefox due to an invalid state

Encountering a problem with opening an indexedDB database specifically in Firefox. Surprisingly, the code works perfectly fine in Chrome but fails to execute in Firefox. <script type="text/javascript> var indexedDB = window.indexedDB || window.web ...

Aligning the column to the right to ensure the text is centered horizontally on the screen

<div className={css.title} > <div className={css.row}> <div className={css.columnLeft}> <div className={css.header}>Images</div> </div> <div className={css.col ...

Ways to verify an iCheck located on the following page

Here is the code snippet I am currently working with: $("#add-new-size-grp").click( function (event) { event.preventDefault(); $.ajax({ type: "get", url:"ajax-get-sizes.php", success: function(result){ $("#sizeg ...

triggering the onsen's setMainPage function when clicked using a variable from ng-repeat loop

I need help customizing my Onsen UI splitView app to dynamically set the main page based on a variable received from a clicked item in a list generated by ng-repeat. After researching ng-repeat and ng-click, I am still unable to achieve the desired outcom ...

Executing the split function on a 2D array in Google Apps Script while maintaining the original column indexing

When running the split function on an array column in Google Apps Script, it generates multiple columns with varying numbers. Some rows may have 6 columns and others only 4. I want to adjust the output array to ensure all rows have an even number of colum ...

Retrieving the class name using jQuery

In my HTML code, there is a div with three classes defined as: <div class = "a b c"> .. </div> My goal is to access only the class b using the .attr() method. Is this achievable? ...