Integrate jQuery into your Spring MVC application

Struggling to integrate jQuery into my Spring MVC application as a beginner in Spring MVC. I've created a 'js' folder under the webapp directory, but unsure how to include the file in my view.

I attempted:

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>

However, this generates an unresolved path issue because there is no controller for /js path.

My query is about the usual practice - should a controller be set up to provide the jquery-2.0.3.min.js file?

javajavascriptspring-mvc

Answer №1

When it comes to integrating common libraries like jquery or bootstrap into your applications, linking to a CDN may seem convenient at first. However, as your project grows, you're likely to require custom CSS, JS, or images. In such cases, utilizing Spring MVC's ResourceServlet to serve these resources is recommended over creating a controller from scratch.

<!-- Efficiently handle HTTP GET requests for /resources/** and serve static resources -->
<mvc:resources location="/" mapping="/resources/**"/>

To reflect this setup in your view, make sure to include "resources" in the path of your resources:

<spring:url value="/resources/js/jquery-2.0.3.min.js" var="jquery_js_url" />
<script src="${jquery_js_url}" type="text/javascript"><!-- /required for FF3 and Opera --></script>

If you want more details on this topic, consider checking out the following resources:

I hope this information proves useful to you.

Answer №2

In my JSPs, I have a line that is functioning properly without using a CDN. The javascript file is hosted locally in the javascript folder which is located under the webapps parent directory.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src='<c:url value="/javascript/jquery.js"/>'></script>

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

Unit tests manipulating JavaScript functions to return undefined values

Currently, I am in the process of testing some JavaScript functions within a larger React application. These functions heavily utilize the module pattern, which leads me to believe that my misunderstanding lies within this pattern. The script I am testing ...

javascriptreactjsunit-testingnode-modules

Maintain original pitch of HTML video content (preservesPitch, mozPreservesPitch, webkitPreservesPitch)

I am attempting to turn off the preservesPitch feature on a video element that is playing in slow motion by adjusting the video's playbackRate. In Chrome, video.webkitPreservesPitch is not defined, and changing it to false or true doesn't affect ...

javascripthtmlaudiohtml5-videopitch

Prepare an email message for sending

Currently, I'm working on an app using officejs. My goal is to extract content from an Excel worksheet and insert it into an Outlook email. However, I don't want the email to be automatically sent by the system. Instead, I would like the new emai ...

javascriptnode.jsoffice-js

Issue: The `libsass` component could not be located

When attempting to run an Express app using node-sass-middleware on Ubuntu, I encountered this error: 0 info it worked if it ends with ok 1 verbose cli [ '/home/mohamed/.nvm/versions/node/v0.12.7/bin/node', 1 verbose cli '/home/mohamed/.n ...

javascriptnode.jsexpresslibsassnode-sass

Unable to clone curved text in fabric.js version 5.3.0

I am currently using fabric.js version 5.3.0 and I have a requirement to clone curved text and add it to the canvas. Description: The issue I am facing is that the cloning functionality does not work properly with curved text. The cloned object does not r ...

javascriptangularjsfabricjs

retrieve data properties from an object

Suppose I have the following setup: var myObj = [ { name: 'A', number: 'b1', level: 0 }, { name: 'B', number: 'b2', level: 0 }, ]; I need to figure out how to retrieve all the names and format them like this: ...

javascript

Incorporation of a dynamic jQuery animation

I'm a beginner in jquery and I'm attempting to achieve the following: I want each menu to collapse separately when the mouse hovers over it. The issue is that both menus collapse simultaneously! I know it's probably something simple, but I ...

javascriptjqueryhtmlcss

Is it advisable to solely rely on CDN for incorporating Bootstrap JS components, or are there any potential drawbacks to

I'm in the process of customizing Bootstrap using my own styles, by utilizing a local version of the source SASS files as outlined in the official documentation, and importing them into a custom.scss file. My main focus is on altering the visual aspe ...

javascripttwitter-bootstrapsassbootstrap-4cdn

The jQuery onClick function functions effectively for the initial two clicks; however, it ceases to

I am currently experimenting with jQuery to dynamically load a specific div from another page on my server into a designated section on the existing page. While the code is successfully functioning for the first two clicks on the website, it fails to work ...

javascriptjqueryhtmlcss

Looking for a JavaScript equivalent to Dart's millisecondsSinceEpoch functionality

A new chat system is being developed to connect mobile and web platforms using firestore. The challenge at hand involves the sorting of documents based on timestamp, as those created from both mobile (using flutter) and web (using vue js) are not in ascend ...

javascriptnode.jsvue.jsflutterdart

Tips for customizing babel's preset plugin configurations

I've integrated babel-preset-react-app into my project with the following .babelrc configuration: { "presets": ["react-app"], "plugins": [ "transform-es2015-modules-commonjs", "transform-async-generator-functions" ] } Currently, I&apos ...

javascriptwebpackbabeljscreate-react-appbabel-plugin

Guide on sending a JavaScript variable to PHP using AJAX

I am currently utilizing the following JavaScript code to obtain data from a td element when a button is clicked within an onclick event. function rfk(element) { var element = element.parentElement.parentElement; var id = parseInt(element.childre ...

javascriptphpajax

How to delete a div element in Material UI's Date Picker

In my project, I am utilizing Material UI's simple Date Picker module. However, I am looking to solely display the calendar section without the month and year indicators along with the navigation arrows. Is it possible to remove these specific element ...

javascripthtmlcssreactjsmaterial-ui

In JavaScript, use regex to replace specific characters while excluding a particular set

const sqlQuery = 'select * from where item1=abcd and price>=20'; To replace the '=' with empty space, I am using the following code: sqlQuery = sqlQuery.replace(/[=]/g, " ") However, this code is also replacing '>='. ...

javascriptregex

Incorporate JSON when adding a new row to the database using Ruby On Rails

Greetings, fellow developers! I am currently working on an application with a backend in Rails. My goal is to create a user from an AJAX request and have the server return a JSON object containing the newly saved user information. Below is my Rails code s ...

javascriptruby-on-railsjson

What is the best way to create a smooth transition between multiple cameras or scenes in three.js?

Wondering if it's feasible, and if so, what's the optimal method to create a specific effect in three.js: I have scene S1 being shown from camera C1and want to: transition to scene S2 as seen from camera C2, or transition to scene S1 as viewed ...

javascriptwebglthree.js

The getText function is malfunctioning

I've been working with Selenium and JAVA to automate tasks within my application. I have encountered a couple of issues that I could use some help with. First, I am having trouble retrieving the correct text from a particular div element. 1. There is ...

javaseleniumselenium-webdriver

How to Use Multiple Arrays in jQuery to Find ChildNodes Based on Class Attribute in HTML?

I manage my weekly schedule manually through a static table. <table> <tr class="live al tv"> <td>October 2</td> <td>12:30 pm</td> <td class="competition"></td> <td>Team A v Team B< ...

javascriptjqueryhtmlarrays

"Exploring JSON data with jQuery: A guide to efficient search techniques

I have a local file containing JSON data which I successfully loaded using jQuery. My current task is to specifically find the pId with the value of "foo1". The JSON data { "1":{ "id": "one", "pId": "foo1", "cId": "bar1" }, "2":{ ...

javascriptjqueryjson

Tips for removing a single item from a list in ReactJS one by one

There seems to be an issue with the deletion functionality in my project. When a user tries to delete a row, sometimes only that specific row is deleted, but other times when there are only two rows left and one is deleted, the data toggles and replaces it ...

javascriptreactjsreact-native