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
– Felix Kling, Commented Aug 16, 2013 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). — Lab
– Lab, Commented Aug 16, 2013 at 10:34
In my case, it's because I used slim minified version of JQuery which takes out ajax function — TomNg
– TomNg, Commented Dec 7, 2016 at 8:36

Gus · Accepted Answer · 2016-11-26 17:52:28Z

1396

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, 2016 at 17:52

answered Nov 21, 2016 at 3:46

Gus

16.1k7 gold badges28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

samnau Over a year ago

This is what fixed my problem! What the heck jQuery?? Why is $.ajax removed from the "slim" build?

Drew Kennedy Over a year ago

Slim build claimed another victim.

Cyril N. Over a year ago

I copied the code from Bootstrap. They use the slim version. Maybe you too?

salimsaid Over a year ago

this answer is still useful in September 13 2020 haha! another up-vote from East Africa!

Syfer Over a year ago

2022 and slim is still missing it

|

karthiks · Accepted Answer · 2017-09-12 20:28:32Z

177

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"

answered Sep 12, 2017 at 20:28

karthiks

7,3797 gold badges55 silver badges66 bronze badges

1 Comment

colemerrick Over a year ago

Using the min build that includes Ajax will be a much better solution for most people, considering file size. See @Daniel Mendoza answer below

user664833 · Accepted Answer · 2017-10-20 01:37:24Z

26

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, 2017 at 1:37

user664833

19.7k20 gold badges97 silver badges151 bronze badges

answered Aug 16, 2013 at 10:32

Jason Evans

29.2k16 gold badges95 silver badges157 bronze badges

7 Comments

Felix Kling Over a year ago

It's not a syntax error. The return value was just expected to be a function which it is not.

Jason Evans Over a year ago

Ahhh I see. So really, this problem is just a missing jQuery script file reference really.

Felix Kling Over a year ago

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).

Jason Evans Over a year ago

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.

nnnnnn Over a year ago

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.

|

Daniel Mendoza · Accepted Answer · 2019-08-30 18:15:43Z

11

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, 2019 at 18:15

Daniel Mendoza

4974 silver badges6 bronze badges

Comments

ASANIAN · Accepted Answer · 2021-03-17 12:05:06Z

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, 2021 at 12:05

ASANIAN

4002 silver badges9 bronze badges

Comments

Zafer Faheem · Accepted Answer · 2022-05-25 06:14:35Z

6

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, 2022 at 6:14

answered Aug 29, 2020 at 18:20

Zafer Faheem

2,0141 gold badge9 silver badges7 bronze badges

Comments

b0rgBart3 · Accepted Answer · 2020-10-14 23:24:30Z

3

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>

answered Oct 14, 2020 at 23:24

b0rgBart3

3041 silver badge5 bronze badges

Comments

Ryan M · Accepted Answer · 2022-10-09 18:03:42Z

3

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

edited Oct 9, 2022 at 18:03

Ryan M♦

20.6k35 gold badges75 silver badges85 bronze badges

answered Oct 6, 2019 at 9:35

Lily H.

3043 silver badges10 bronze badges

Comments

Sasidhar Vanga · Accepted Answer · 2013-08-16 10:38:42Z

2

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
});

edited Aug 16, 2013 at 10:38

Sasidhar Vanga

3,4042 gold badges29 silver badges47 bronze badges

answered Aug 16, 2013 at 10:34

abhinsit

3,2574 gold badges23 silver badges26 bronze badges

Comments

Parsamlm · Accepted Answer · 2022-12-13 12:24:28Z

2

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.

answered Dec 13, 2022 at 12:24

Parsamlm

728 bronze badges

Comments

netvision73 · Accepted Answer · 2013-08-16 10:34:49Z

1

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

answered Aug 16, 2013 at 10:34

netvision73

4,9311 gold badge26 silver badges30 bronze badges

Comments

Jianeng Xu · Accepted Answer · 2016-05-04 06:19:53Z

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 4, 2016 at 6:19

Jianeng Xu

1171 gold badge1 silver badge9 bronze badges

Comments

bersling · Accepted Answer · 2017-06-20 14:26:17Z

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)

MrAlbino · Accepted Answer · 2022-09-14 12:19:35Z

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, 2022 at 12:19

MrAlbino

4374 silver badges14 bronze badges

Comments

Sriparna Ghosh · Accepted Answer · 2020-06-19 13:18:49Z

-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, 2020 at 13:18

answered May 11, 2020 at 19:16

Sriparna Ghosh

494 bronze badges

1 Comment

Quentin Over a year ago

No. Loading jQuery slim and then immediately overwriting it with jQuery is utterly pointless and a waste of bandwidth.

Collectives™ on Stack Overflow

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

15 Answers 15

15 Comments

1 Comment

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

15 Comments

1 Comment

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related