Why jQuery does not work in nested Ajax functions?

Question

While calling nested Ajax, which innermost ajax doesn't work. As seen in the following example, I 'm calling getInnerResp into getResult.

Normally, when I debug with firebug is works interestingly. I think it behaves as async false but I setted async property as false didn't work again. Furthermore, I tried to get result set using callback function in getInnerResp function. Unfortunately I didn't succeed in any way. Also ftbl variable in getResult function returns null. getInnerResp only returns followed result;

Result

<tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr><tr><td colspan='3'></td></tr>

Javascript

function getResult(year){

    var visible  = true;
    var table    = $(".tbl"), tbody = $(".result").find("tbody"), ftbl = "";
    
    table.find("tbody>tr").each(function(){
        var data = {
            course : $(this).find(".course").val(),
            year   : year,
            prog   : $(this).find(".program").val()
        }
        
        if(year.length < 1){
          alert("Year field can not be empty!!");
          visible = false;
          return false;
        }
        
        $.ajax({
            url : "result.php",
            method : "GET",
            data : data,
            contentType: "application/json; charset=utf-8",
            traditional : true,
            success : function(d){           
                tbody.append("<tr><td>" + course + "</td><td>" + d.enrolledStudent + "</td><td>" + d.failedStudent + "</td>");
                if(visible){
                    ftbl += getInnerResp(course, year);
                    console.log("inner" + ftbl);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown){
                alert("Javascript runtime error: " + textStatus);
            }
        });
    });

    if(visible){
        tbody.append(ftbl);
    }
}

function getInnerResp(course, year){
  
    var tbl = "";
      
    var data = {
        course : course,
        year   : year
    }
    
    for(var i = 0; i < 5; i++){
        tbl += "<tr><td colspan='3'></td></tr>";
    }
      
    $.ajax({
        url : "course.php",
        method : "GET",
        data : data,
        contentType: "application/json; charset=utf-8",
        success : function(json){           
            $.each(json, function(i, val){
                tbl += "<tr><td>" + course + "</td><td colspan='2'>" + val + "</td></tr>";
            });
        },
        error : function(XMLHttpRequest, textStatus, errorThrown){
            alert(textStatus);
        }
    });
      
    return tbl;
}

Answer 1

This is your issue:

ftbl += getInnerResp(course, year);

you try to assign a value generated in future (async) to a local variable.

Try to move the task in the inner function, like:

function getResult(year){

        var visible  = true;
        var table    = $(".tbl"), tbody = $(".result").find("tbody"), ftbl = "";

        table.find("tbody>tr").each(function(){
            var data = {
                course : $(this).find(".course").val(),
                year   : year,
                prog   : $(this).find(".program").val()
            }

            if(year.length < 1){
                alert("Year field can not be empty!!");
                visible = false;
                return false;
            }

            $.ajax({
                url : "result.php",
                method : "GET",
                data : data,
                contentType: "application/json; charset=utf-8",
                traditional : true,
                success : function(d){
                    tbody.append("<tr><td>" + course + "</td><td>" + d.enrolledStudent + "</td><td>" + d.failedStudent + "</td>");
                    if(visible){
                        //
                        // do the remaing in the inner task....
                        //
                        getInnerResp(course, year, tbody);
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown){
                    alert("Javascript runtime error: " + textStatus);
                }
            });
        });

    }

    function getInnerResp(course, year, tbody){

        var tbl = "";

        var data = {
            course : course,
            year   : year
        }

        for(var i = 0; i < 5; i++){
            tbl += "<tr><td colspan='3'></td></tr>";
        }

        $.ajax({
            url : "course.php",
            method : "GET",
            data : data,
            contentType: "application/json; charset=utf-8",
            success : function(json){
                $.each(json, function(i, val){
                    tbl += "<tr><td>" + course + "</td><td colspan='2'>" + val + "</td></tr>";
                });
                tbody.append(tbl);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown){
                alert(textStatus);
            }
        });

        console.log("inner" + tbl);;
    }

Answer 2

In getResult function ajax success callback, 'course' variable is being used but it was not defined anywhere. It might be causing exception, which makes script execution to stop before calling getInnerResp.