CODEWITHSUNDEEP
javascriptjqueryajax
Karlom
Karlom

Reputation: 14874

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

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?

Upvotes: 50

Views: 79227

Answers (3)

Shailesh Sonare
Shailesh Sonare

Reputation: 3131

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>

Upvotes: 42

JCollerton
JCollerton

Reputation: 3327

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.

Upvotes: 59

adeneo
adeneo

Reputation: 318342

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

});

Upvotes: 22

Related Questions