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

gaetanoM · Accepted Answer · 2017-06-07 13:22:10Z

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

Thanks a lot, i solved my issue as you specify. i thought, ftbl already global variable in getResult function and i can fill it with getInnerResp function directly.

Ramadurgarao · Accepted Answer · 2017-06-07 13:16:09Z

1

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.

answered Jun 7, 2017 at 13:16

Ramadurgarao

337 bronze badges

2 Comments

Goran Zooferic Over a year ago

it gets course detail through an textbox in table row $(this).find(".course").val()

Ramadurgarao Over a year ago

needs to reference that as data.course but it was mentioned as just course in the code.

Collectives™ on Stack Overflow

Why jQuery does not work in nested Ajax functions?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related