TypeError: $.ajax is not defined, please continue to choose the slim version

Trying to incorporate ajax into my spring boot project, I encountered an issue with the following error code: Uncaught TypeError: $.ajax is not a function

After going through all the previous suggestions, it was identified that the problem stemmed from using the slim version. Despite attempting various solutions, none seemed to resolve the issue.

Below is the snippet of my code:

pom.xml

    <dependency>
        <groupId>org.webjars.bower</groupId>
        <artifactId>jquery</artifactId>
        <version>3.5.1</version>
    </dependency>

page.html

<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
...

<script type="text/javascript">
... ajax code

Further investigation revealed that despite specifying the 3.5.1 version, my project continued to utilize the slim version in the browser.

Uncaught TypeError: $.ajax is not a function
at HTMLButtonElement.<anonymous> (7:156)
at HTMLButtonElement.dispatch (jquery-3.4.1.slim.min.js:2)
at HTMLButtonElement.v.handle (jquery-3.4.1.slim.min.js:2)

https://i.sstatic.net/hc9Qp.png

Spent the entire day troubleshooting this issue, but couldn't pinpoint why the program defaulted to the 3.4.1.slim version instead of 3.5.1.

javascriptajaxspring-boot

Answer №1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Utilizing this jQuery script, you can easily incorporate Ajax functions without the need to re-add Maven dependencies for jQuery.

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

An irritating problem with TypeScript-ESLint: when a Promise is returned without being resolved

Check out this TypeScript snippet I've simplified to showcase a problem: import * as argon2 from "argon2"; export default async function(password:string):Promise<string> { return argon2.hash(password, { type: argon2.argon2id, ...

javascripttypescripteslinttypescript-eslint

Is there a way to determine if a variable includes Chinese or Japanese characters?

Is there a way to determine if a variable includes Chinese or Japanese characters? I have found this line effective: if (myVariable.match(/[\u3400-\u9FBF]/)) My goal is to apply the same concept to a specific variable, rather than the entire do ...

javascriptjqueryhtml

Express identifies the user, however, the username is displayed exclusively on one specific page. This situation may indicate a potential cookie problem

I am in the process of developing an express app integrated with MongoDB. The issue I am facing involves a pug template for the navigation bar where I aim to display the user's name at the top upon logging in. Strangely, it only works on the page that ...

javascripthtmlnode.jscookiespug

The issue of why a hyphenated id selector does not function properly in javascript

Just delving into the world of JavaScript, I recently started learning how to code in this language. Currently, I am working on a JavaScript function that counts characters. Javascript function CheckFieldLength(fn, wn, rn, mc) { var len = fn.value.leng ...

javascriptjqueryhtml

Creating a custom useStorage hook to easily save a Set data type in local storage

I attempted to make modifications to the code found at this reference link: useLocalStorage hook my goal was to enable saving a Set() to localStorage. useLocalStorage.js import { useState, useEffect } from "react"; // Custom Hook export const ...

javascriptreactjsreact-hookslocal-storagestate

What is the best way to trigger UseEffect when new data is received in a material table?

I was facing an issue with calling a function in the material table (https://github.com/mbrn/material-table) when new data is received. I attempted to solve it using the following code. useEffect(() => { console.log(ref.current.state.data); ...

javascriptjqueryreactjsmaterial-uimaterial-table

What is the best way to extract data from a url after a callback has been implemented on an HTML page

I am working on an html page that receives a callback from a social service. Once the callback is implemented, I need to extract data from the url. Does anyone have suggestions on how to retrieve this data after the callback has been successfully impleme ...

javascripthtmlcallback

How can I integrate a like button into my AJAX output?

I've inserted this code right after the opening body tag on my index page: <div id="fb-root"></div> Followed by the rest of the SDK code... As I am loading images through AJAX popups, I am attempting to load a like button for each one a ...

ajaxfacebook-like

Error TS2349: The function cannot be called as it does not have a defined call signature. The type 'typeof renderIf' does not have any compatible call signatures

Based on the starter template found at https://github.com/react-native-training/reactxp-starter, I am just starting out with TypeScript! The issue seems to be related to the type in the renderIf function. I'm unsure where exactly the type should be s ...

javascripttypescriptreact-nativereactxp

Chrome extensions using Cross-Origin XMLHttpRequest

Chrome extensions API states that cross-origin calls using the XMLHttpRequest object should be allowed with proper permissions: An extension can communicate with remote servers beyond its origin by requesting cross-origin permissions. Following the Goog ...

javascriptajaxgoogle-chromegoogle-chrome-extensionxmlhttprequest

The success body of Jquery Ajax is not receiving any response

Despite trying various methods, I have been unsuccessful in retrieving the desired result from my jQuery ajax success function. I have included the jQuery library, but to no avail. Any guidance on where I may be going wrong in my code would be greatly appr ...

javascriptphpjqueryhtmlajax

generate code to automatically output the content of a website

I'm in the process of creating a program that automatically navigates to a website and prints a page. Unfortunately, I'm encountering difficulties in getting it to function properly. I've attempted using the selenium chrome driver, but with ...

javascriptc#selenium-webdriver

Two jQuery event handlers with similar functionality are displaying distinct behaviors

I've encountered an issue with two identical document fragment objects where separate event listeners are attached using jQuery, as demonstrated in this fiddle. Although the two event listeners should function the same way, only the first one behaves ...

javascriptjquery

Include a label within the Highcharts Gantt chart square

I'm struggling to include a label within each box in the Gantt Diagram Highcharts, and I'm unsure how to proceed. How can I display a value within each frame? The label needs to be positioned at the center of each box, and all the data is genera ...

javascriptcsshighcharts

getJSON takes precedence over other tasks

I am having a challenge retrieving data in JSON format from the server and displaying it dynamically in a table. The code runs without errors and successfully fetches the data, but for some reason, nothing appears in the table. I suspect there may be an ...

javascriptjquerygetjson

Trouble with displaying Google line chart on Django platform

I am currently working on a project involving the visualization of COVID data. The idea is that when a user selects a specific state, date range, and output type, the corresponding graph should be displayed using Google API to showcase line charts. However ...

javascripthtmldjangochartsgoogle-visualization

Adjusting diagram size based on screen width using Bootstrap and jQuery

I recently created a diagram that adjusts its size according to the screen width. However, when I implemented this code on my page, I encountered an issue where the final circle or glyph would drop to the next line instead of staying on the same line as in ...

javascriptjqueryhtmlcsstwitter-bootstrap

Send data through a file using the file=@ format with the help of Javascript

My current challenge involves making an api call that necessitates uploading a file in the file=@ format. The api call works perfectly using postman/curl. Here is an example: curl -X POST \ 'http://localhost/test' \ -H 'Au ...

javascriptajaxxmlhttprequestmultipartform-data

How can I display a loading indicator in an Angular 7 application while waiting for all API responses to complete?

I have multiple API calls on a page, each with different response times. When the first API call finishes and sets the loading indicator to false, I want to keep the indicator active until all five API calls have responded. Can you provide any suggestions ...

javascriptjqueryangularcssangular7

Issues encountered when integrating Nextjs with React Native and Expo

Attempting to set up an Expo project with Next.js, I executed the expo init command expo init . in my directory. The initial setup appeared to be successful. Following the steps outlined at , specifically under the section on adding Next.js to Expo project ...

javascriptreactjsreact-nativenext.jsexpo