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

Question

I'm new to jQuery and using a little old tutorial on node.js that uses this snippet :

$(function () {    
    var roomId;

    $.ajax({
        type: "GET",
        url: "/api/rooms"
    }).success(function (rooms) { 
        roomId = rooms[0].id;
        getMessages();
        $.each(rooms, function (key, room) {
            var a = '<a href="#" data-room-id="' + room.id + '" class="room list-group-item">' + room.name + '</a>';
            $("#rooms").append(a);
        });

    });

    [...]       

});

However I get this error

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

at }).success(function (rooms) {

I'm wondering what can be wrong here?

Solution 1

The call to ajax should look like:

$.ajax({
    type: "GET",
    url: "/api/rooms",
    success: function (rooms) { 

    }
});

You don't method chain the success function, it is one of the entries in the dictionary argument.

Solution 2

Your code is correct there is no problem with it

but you might be including the new jquery library which doesn't allow .success() method

for newer version of jquery use

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    $.ajax({
        type: "GET",
        url: "/api/rooms",
        success: function (rooms) {

        }
    });
</script>

and if you are using old jquery the .success() method would run without any problem

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $.ajax({

        url: "/api/rooms",
        method: "GET",
        data: {'datavar': datavalue}

    }).success(function (rooms) {

        console.log("successfully run ajax request..." + rooms);

    }).done(function () {

        console.log("I am from done function");

    }).fail(function () {

        console.log("I am from fail function.");

    }).always(function () {

        console.log("I am from always function");

    });
</script>

Solution 3

According to the documentation

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods are removed as of jQuery 3.0.

You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

---

These methods were originally added to jQuery's $.ajax as options callbacks, to be used like this

$.ajax({
    url      : 'mypage.php',
    success  : function() { ... },
    error    : function() { ... },
    complete : function() { ... }
});

However, due to some confusion among users, they were later also accompanied by chainable methods with the same names

$.ajax().success(  function() { ... })
        .error(    function() { ... })
        .complete( function() { ... })

These methods have been deprecated since jQuery 1.8, and completely removed in jQuery 3.0, due to the use of Deferred objects, and later promises.

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() are superseeded by the chainable jqXHR.done(), jqXHR.fail(), and jqXHR.always() methods, the options callbacks are still available for now.

As of jQuery 3.0, jQuery's Deferred objects are also Promise/A+ compliant, which means they are "thenable", and can be used with then() as well

$.ajax("/status").then(function(data) {

}).catch(function(error) {

});

Comments

[Jason P]

You're looking for done(). api.jquery.com/deferred.done

[Karlom]

Right. I replaced all success with done and the error is gone. Thanks for the tip!

[MugiwaraUK]

You can chain the success function call, but you need to use .done() shown in example @ jsfiddle.net/f7h8heb5, but you are also add the success option in the ajax call as you example shows as well

[Karlom]

Right, In jQuery 1.8 on the jqXHR object (returned by $.ajax) success is being replaced with done, error with fail and complete with always. stackoverflow.com/a/8847853/5774375

[OJisBad]

For my money, this is the best answer. Thank you for being so complete.