TypeError: $.ajax(...) is not a function?

Question

I'm attempting to create an AJAX request. Here's my function definition:

function AJAXrequest(url, postedData, callback) {
    $.ajax({
        type: 'POST',
        url: url,
        data: postedData,
        dataType: 'json',
        success: callback
    });
}

Here's where I call it, providing the parameters:

AJAXrequest('voting.ajax.php', data, function(data) {
    // function body
});

Yet the callback does not run, and instead I get a console.error:

TypeError: $.ajax(...) is not a function.

Why?

You called `$.ajax` without arguments (`$.ajax()`) and the return value is a jqXHR object, which is not a function. Hence `$.ajax()(...)` will throw an error. — Felix Kling, Aug 16 '13 at 10:34
either you missed to include jquery.js OR you have included jquery.js below the function call OR please try jQuery.ajax (replace $ with jQuery). — Pranay Bhardwaj, Aug 16 '13 at 10:34
In my case, it's because I used [slim minified](https://code.jquery.com/jquery-3.1.1.slim.min.js) version of JQuery which takes out ajax function — TomNg, Dec 07 '16 at 08:36
THANK YOU, Tom Ng. That was exactly the problem I was having. Sadly, the information provided when trying to decide between which version of jQuery to link to, they make no mention of this. — Zonker.in.Geneva, Aug 06 '17 at 15:49
Also thanks TomNg, it was the slim minified version causing the problem and based on the positive votes from the non accepted answer below it looks like it's the same issue that most people are having. — Simon, Dec 04 '17 at 14:35
This question should really be clarified… The issue is the extra `()` after `$.ajax`. The error means that `$.ajax()` is not a function, because _it really isn’t_. `$.ajax()` is an _object_, not a function. `$.ajax` however _is_ a function. If it wasn’t, the error would say _“`TypeError`: `$.ajax` is not a function”_. _That_ would’ve been caused by importing jQuery Slim, rather than the regular one. Read the error _carefully_! And if jQuery wasn’t imported at all, the error would say _“`ReferenceError`: `$` is not defined”_. The question should mention that the full jQuery is loaded. — Sebastian Simon, Aug 10 '18 at 00:57
Can confirm 2 years later @TomNg, I'm using Bootstrap 4 which does include jQuery, but only the slim version. Changed my include logic to replace the `slim.min` version with just `min`. Thanks — David Mordigal, May 27 '19 at 23:54
Can confirm answer is still relevant on October 2022, @TomNg — NegassaB, Oct 06 '22 at 19:42
I think you are using the jQuery CDN - Slim version (=without AJAX) some ware else, check the bottom line close to
tag, Delete that — Eranda J., Jun 26 '23 at 06:48

Gus · Accepted Answer · 2016-11-26T17:52:28.127

1340

Neither of the answers here helped me. The problem was: I was using the slim build of jQuery, which had some things removed, ajax being one of them.

The solution: Just download the regular (compressed or not) version of jQuery here and include it in your project.

edited Nov 26 '16 at 17:52

answered Nov 21 '16 at 03:46

Gus

15,397
7
25
28

75

This is what fixed my problem! What the heck jQuery?? Why is `$.ajax` removed from the "slim" build? – samnau Jan 11 '17 at 22:25
78

Slim build claimed another victim. – Drew Kennedy Jul 20 '17 at 12:10
76

I copied the code from Bootstrap. They use the slim version. Maybe you too? – Cyril N. Sep 21 '17 at 15:13
This is documented on the jquery download page, but not on the bootstrap starter template page -- at least not that I saw. Your solution fixed my problem. – Jeff Sep 01 '20 at 18:36
6

this answer is still useful in September 13 2020 haha! another up-vote from East Africa! – salimsaid Sep 13 '20 at 14:23
This answer is _not_ the problem that the question ran into. Given the code in the question, the full build of jQuery would not work either. See [this answer](https://stackoverflow.com/a/18271266/1202830) for the real problem here. (Yes, you do need the full build of jQuery, not the slim build, but the real problem is the extra `()`.) – Michael Geary Nov 28 '20 at 20:32
Slim build is trash, don't use it, it gives so many problems... just stay with the minified, it's already enough! Thanks Gus for the save btw. upvoted – Florian Doyen Dec 16 '20 at 10:21
Using the min build that includes Ajax will be a much better solution for most people, considering file size. See @Daniel Mendoza answer below – colemerrick Feb 04 '21 at 01:41
Thanks for the answer - the weird thing for me is, $.ajax worked fine when my app was running on ColdFusion. Now that I'm running it on Lucee, I'm getting the '$.ajax is not a function' error even though the jquery files didn't change. Switching it out for the non-slim version solved the issue :-) – HDuck Aug 23 '21 at 14:45
2

2022 and slim is still missing it – Syfer Jan 11 '22 at 00:49
2022 again and this saved me! What heck jquery!! – Milo Persic Jan 11 '22 at 02:47
Next time, use XMLHttpRequest rather than jQuery – Alston Oct 30 '22 at 11:05
very help full do same mistake – M.Idrish Nov 27 '22 at 16:08

score 175 · Answer 2 · answered Sep 12 '17 at 20:28

Double-check if you're using full-version of jquery and not some slim version.

I was using the jquery cdn-script link that comes with jquery. The problem is this one by default is slim.jquery.js which doesn't have the ajax function in it. So, if you're using (copy-pasted from Bootstrap website) slim version jquery script link, use the full version instead.

That is to say use <script src="https://code.jquery.com/jquery-3.1.1.min.js"> instead of <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"

Using the min build that includes Ajax will be a much better solution for most people, considering file size. See @Daniel Mendoza answer below — colemerrick, Feb 04 '21 at 01:41

score 27 · Answer 3 · edited Oct 20 '17 at 01:37

27

Not sure, but it looks like you have a syntax error in your code. Try:

$.ajax({
  type: 'POST',
  url: url,
  data: postedData,
  dataType: 'json',
  success: callback
});

You had extra brackets next to $.ajax which were not needed. If you still get the error, then the jQuery script file is not loaded.

edited Oct 20 '17 at 01:37

user664833

18,397
19
91
140

answered Aug 16 '13 at 10:32

Jason Evans

28,906
14
90
154

2

It's not a syntax error. The return value was just expected to be a function which it is not. – Felix Kling Aug 16 '13 at 10:34
Ahhh I see. So really, this problem is just a missing jQuery script file reference really. – Jason Evans Aug 16 '13 at 10:38
3

No. Look at it as `$.ajax()();`. This is valid JavaScript. It means "call `$.ajax` and whatever it returns, call it as well". But `$.ajax` does not return a function (which could be called), it returns a `jqXHR` object, so it throws an error. Your answer is correct, the additional `()` are the problem, but the description of the problem is not correct (it's not a syntax error, well at least not for the parser). – Felix Kling Aug 16 '13 at 10:39
No, sorry, that's what I was stating in my previous comment; that this is not a syntax error problem, since the syntax is valid, but rather an issue with the jQuery script file not loaded at the time $.ajax() is used. – Jason Evans Aug 16 '13 at 10:43
2

No, jquery.js is not missing (if it was the error would be about the `$`) but it's not a syntax error either in that it's valid JS. It's just not appropriate syntax for the desired behaviour, so it causes a runtime error as explained by Felix. – nnnnnn Aug 16 '13 at 10:44
Sorry, maybe I should have made this clearer. The file is (probably) there, otherwise the error would be something like "Cannot read property 'ajax' of undefined". – Felix Kling Aug 16 '13 at 10:46
`` The jQuery file is definitely there. – marked-down Aug 16 '13 at 10:52

score 10 · Answer 4 · answered Aug 30 '19 at 18:15

10

Reference the jquery min version that includes ajax:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

answered Aug 30 '19 at 18:15

Daniel Mendoza

487
4
6

score 8 · Answer 5 · answered Mar 17 '21 at 12:05

8

I used following version of jQuery and it worked

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

answered Mar 17 '21 at 12:05

ASANIAN

372
2
8

Zafar Faheem · Answer 6 · 2022-05-25T06:14:35.830

5

Don't use the slim build of jQuery, which doesn't have the ajax function in it. Use the minified version instead from https://releases.jquery.com/

Note: Make sure to not use the jquery link copied from the Bootstrap website, because they use the slim version.

edited May 25 '22 at 06:14

answered Aug 29 '20 at 18:20

Zafar Faheem

2,014
1
7
7

score 3 · Answer 7 · answered Oct 14 '20 at 23:24

I know this is an old posting -- and Gus basically answered it. But in my experience, JQuery has since changed their code for importing from the CDN - so I thought I would go ahead and post their latest code for importing from the CDN:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

score 2 · Answer 8 · edited Aug 16 '13 at 10:38

There is a syntax error as you have placed parenthesis after ajax function and another set of parenthesis to define the argument list:-

As you have written:-

$.ajax() ({
    type: 'POST',
    url: url,
    data: postedData,
    dataType: 'json',
    success: callback
});

The parenthesis around ajax has to be removed it should be:-

$.ajax({
    type: 'POST',
    url: url,
    data: postedData,
    dataType: 'json',
    success: callback
});

score 2 · Answer 9 · edited Oct 09 '22 at 18:03

2

If you are using bootstrap html template remember to remove the link to jquery slim at the bottom of the template.

edited Oct 09 '22 at 18:03

Ryan M

18,333
31
67
74

answered Oct 06 '19 at 09:35

Lily H.

164
2
10

score 1 · Answer 10 · answered Aug 16 '13 at 10:34

1

You have an error in your AJAX function, too much brackets, try instead $.ajax({

answered Aug 16 '13 at 10:34

netvision73

4,831
1
24
30

score 1 · Answer 11 · answered May 04 '16 at 06:19

1

I encountered the same question, and my solution was: add the JQuery script.

Especially, we should make sure the corresponding JQuery is loaded when we debug our js under the firefox/chrome.

answered May 04 '16 at 06:19

Jianeng Xu

107
1
9

score 1 · Answer 12 · answered Dec 13 '22 at 12:24

It may be because of the slim build of JQuery. Try to use 'uncompressed' or 'minified' builds. (JQuery CDNs)
It also may be because of loading Bootstrap CDN before the JQuery CDN. In my case, I removed the Bootstrap CDN and move the JQuery one to the end of the 'body' tag and the problem was solved.

score 0 · Answer 13 · answered Jun 20 '17 at 14:26

For anyone trying to run this in nodejs: It won't work out of the box, since jquery needs a browser (or similar)! I was just trying to get the import to run and was logging console.log($) which wrote [Function] and then also console.log($.ajax) which returned undefined. I had no tsc errors and had autocomplete from intellij, so I was wondering what's going on.

Then at some point I realised that node might be the problem and not typescript. I tried the same code in the browser and it worked. To make it work you need to run:

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);
});

(credits: https://stackoverflow.com/a/4129032/3022127)

score 0 · Answer 14 · answered Sep 14 '22 at 12:19

0

I included bootstrap scripts and the first one(jquery.slim) is the reason of this error. Removing the first row solved my problem.

answered Sep 14 '22 at 12:19

MrAlbino

308
2
10

Sriparna Ghosh · Answer 15 · 2020-06-19T13:18:49.120

-2

let me share my experience:

my html page designer use:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

when I create a simple AJAX request, getting an error it says, TypeError: $.ajax(…) is not a function

So, i add:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

then, it perfectly works for me at least.

edited Jun 19 '20 at 13:18

answered May 11 '20 at 19:16

Sriparna Ghosh

49
4

1

No. Loading jQuery slim and then immediately **overwriting** it with jQuery is utterly pointless and a waste of bandwidth. – Quentin May 11 '20 at 19:40

TypeError: $.ajax(...) is not a function?

15 Answers15

Linked

Related