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

Question

I'm trying to create a simple AJAX request which returns some data from a MySQL database. Here's my function below:

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

...and here's where I call it, parsing in the required parameters:

AJAXrequest('voting.ajax.php', imageData, function(data) {
    console.log("success!");
});

Yet, my success callback does not run (as "success!" is not logged to the console), and I get an error in my console:

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

What does this mean? I've done AJAX requests before where the success event triggers an anonymous function inside of $.ajax, but now I'm trying to run a separate named function (in this case, a callback). How do I go about this?

Answer 1

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.

Answer 2

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"

Answer 3

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.

Answer 4

Checkout The Jquery Documentation

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Answer 5

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>

Answer 6

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>

Answer 7

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

Answer 8

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

Answer 9

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>

Answer 10

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.

Answer 11

If you are using bootstrap html template remember to remove the link to jquery slim at the bottom of the template. I post this detail here as I cannot comment answers yet..

Answer 12

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)

Answer 13

This is too late for an answer but this response may be helpful for future readers.

I would like to share a scenario where, say there are multiple html files(one base html and multiple sub-HTMLs) and $.ajax is being used in one of the sub-HTMLs.

Suppose in the sub-HTML, js is included via URL "https://code.jquery.com/jquery-3.5.0.js" and in the base/parent HTML, via URL -"https://code.jquery.com/jquery-3.1.1.slim.min.js", then the slim version of JS will be used across all pages which use this sub-HTML as well as the base HTML mentioned above.

This is especially true in case of using bootstrap framework which loads js using "https://code.jquery.com/jquery-3.1.1.slim.min.js".

So to resolve the problem, need to ensure that in all pages, js is included via URL "https://code.jquery.com/jquery-3.5.0.js" or whatever is the latest URL containing all JQuery libraries.

Thanks to Lily H. for pointing me towards this answer.

Answer 14

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

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

Answer 15

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.

Answer 16

That's a problem with your version of jquery. Look here https://code.jquery.com/ and add this script

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous">
</script>