can't get result from ajax call within ajax success

Question

I know this has been asked several times and I have read several answers about the callbacks, but I'm still very confused how to apply to my situation. I have an ajax function being called from within the success of a second ajax function. The result of the embedded ajax is always undefined.

Jquery:

$('#mergeModal').on('show.bs.modal', function (e) {
            // get the list of groups
            $.ajax({
                type: "GET",
                url: '@Url.Action( "GetGroups", "Tally" )',
                data: { contractId: $("#contractId").val()  },
                success: function (data) {
                    // empty then refill groups table
                    $("#groupsTable tbody").empty();
                    for (var key in data.groups) {
                        var groupParts = data.groups[key].split("::");
                        $("#groupsTable tbody").append("<tr id='" + groupParts[0] + "'><td>" + groupParts[1] + "</td><td>" + groupParts[2] + "</td></tr>");
                    }
                    // highlight first row and show appropriate students in students table
                    $("#groupsTable tbody tr:first").css("background-color", "#FFFF7F");
                    var groupID = $("#groupsTable tbody tr:first").attr('id');
                    console.log("groupID: " + groupID);
                    var students = getStudents(groupID);
                    console.log("students: " + students);
                    if(students != "false") {
                        for(var student in students.sellers) {
                            console.log(student);
                        }
                    }

Here is the getStudents function:

function getStudents(group) {
            $.ajax({
                type: "GET",
                url: '@Url.Action( "GetSellers", "Tally" )',
                data: { groupId: group, contractId: $("#contractId").val()  },
                success: function (data) {
                    return data;
                },
                error: function() {
                    return "false";
                }
            });
        }

Don't use strings of "true" and "false", use the Boolean `true` or `false`. — Waxi, Mar 10 '17 at 22:58

score 0 · Accepted Answer · answered Mar 10 '17 at 22:55

The problem is hidden in your getStudents function since that function does not return any value. The two returns inside the ajax call will be triggered asynchronously. But you can add your own callback param/function to get back the data you need.

function getStudents(group, callback) {
    $.ajax({
        type: "GET",
        url: '@Url.Action( "GetSellers", "Tally" )',
        data: { groupId: group, contractId: $("#contractId").val()  },
        success: function (data) {
            callback(data);
        },
        error: function() {
            callback(false);
        }
    });
}

And then this is the way how you will call it:

$('#mergeModal').on('show.bs.modal', function (e) {
    // get the list of groups
    $.ajax({
        type: "GET",
        url: '@Url.Action( "GetGroups", "Tally" )',
        data: { contractId: $("#contractId").val()  },
        success: function (data) {
            // empty then refill groups table
            $("#groupsTable tbody").empty();
            for (var key in data.groups) {
                var groupParts = data.groups[key].split("::");
                $("#groupsTable tbody").append("<tr id='" + groupParts[0] + "'><td>" + groupParts[1] + "</td><td>" + groupParts[2] + "</td></tr>");
            }
            // highlight first row and show appropriate students in students table
            $("#groupsTable tbody tr:first").css("background-color", "#FFFF7F");
            var groupID = $("#groupsTable tbody tr:first").attr('id');
            console.log("groupID: " + groupID);
            
            getStudents(groupID, function(students) {
              console.log("students: " + students);
              if(students != false) {
                  for(var student in students.sellers) {
                      console.log(student);
                  }
              }
            });
            
            // ...

As you see, when calling the getStudents function you will not get the return value right away, but you will provide it with an anonymous function which will be called just right after the getStudents function will finish it's logic and will have some result to share - which it will provide as argument to your anonymous/callback function.

Well, I agree. However in the context of this question I decided to show the solution for the problem described above. In simple and clear way. Promises are then the next step which should be considered regarding the clean and proper way. Thus I don't feel my answer deserves downvote. — Filip Matthew, Mar 12 '17 at 01:38
Thank you! I'm having a hard enough time wrapping my head around callbacks. I don't have time right now to learn something completely new like Promises. — dmikester1, Mar 13 '17 at 15:35

can't get result from ajax call within ajax success

1 Answers1