Returned value is undefined even though in console it says it isn't

Question

I'm trying to get data from my database and put it in a dynamically created row with ajax. But every time I try to enter the data in the table row, it says it's undefined.

Could this be because I'm doing an ajax request within an ajax request? Anyway, here is my code: (I know it's large, but it's a code to maintain a color code within a grid)

function detail(id, position, color)
{
    if (color == 1){
        var color = "#FFFFFF";
    }else{
        var color = "#E0F3F9";
    }

    var blnDelete;
    var rowIndex = position + 1;
    console.log("row index: " + rowIndex);
    var key = searchBox.value;
    var table = document.getElementById("0");
    xmlhttp=new XMLHttpRequest();

    console.log("cannot delete now");

    xmlhttp.open("GET","idSession.php?id="+id+"&index="+rowIndex,true);
    console.log("idSession.php?id="+id+"&index="+rowIndex);
    xmlhttp.send();

    xmlhttp.onreadystatechange=function(e)
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log("response received!");
                console.log(xmlhttp.responseText);
                console.log(id);
                oldId = xmlhttp.responseText;

                var response = xmlhttp.responseText;
                var oldIndex = response.substring(response.indexOf(":") + 1);
                var oldId = response.split(":", 1);
                console.log("oldIndex: " + oldIndex);
                console.log("oldId: " + oldId);

                if (oldId == id){
                    console.log("it's the same");
                    if (oldIndex != "none" && blnDelete == true){
                        table.deleteRow(oldIndex);
                        console.log("Deleted old row");
                        blnDelete == false;
                        console.log("cannot delete now");
                    }
                }else if (oldId != ""){
                    console.log("it's not the same");
                    if (oldIndex != "none"){
                        table.deleteRow(oldIndex);
                        console.log("Deleted old row");
                    }

                    var oldHTML = document.getElementById(id).innerHTML;
                    var detailRow = table.insertRow(position +1);
                    detailRow.style.height = '250px';
                    detailRow.style.backgroundColor = "'" + color + "'";

                    document.getElementById(id).vAlign="top";

                    var test = getInfo(id);
                    console.log("info: " + test);

                    detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";
                    blnDelete == true;
                    console.log("can delete now");
                }else{
                    console.log("it's empty");

                    var oldHTML = document.getElementById(id).innerHTML;
                    var detailRow = table.insertRow(position +1);
                    detailRow.style.height = '250px';
                    detailRow.style.backgroundColor = "'" + color + "'";

                    document.getElementById(id).vAlign="top";

                    var test = getInfo(id);
                    console.log("info: " + test);

                    detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";
                    blnDelete == true;
                    console.log("can delete now");
                }


            }
        }



};

function getInfo(id){

var info;

xmlhttp=new XMLHttpRequest();

    xmlhttp.onreadystatechange=function(e)
        {

            if (xmlhttp.readyState < 4 && xmlhttp.status==200)
            {
                console.log("waiting...");
            }
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                console.log("response received!");
                console.log("response: " + xmlhttp.responseText);
                info = xmlhttp.responseText;

                if (info == ""){
                    info = "N/A";
                    console.log("info:" + info);
                }

                console.log(info);
                return info;
            }
        }   

    xmlhttp.open("GET","getInfo.php?id="+id,true);
    xmlhttp.send();

};

So what I do here is first I get an ajax request to see what index the previous row had, to see whether it should be removed or not. All that code works, but what I can't get to work is this:

var test = getInfo(id);
console.log("info: " + test);

detailRow.innerHTML = "<td bgcolor='"+color+"'>"+ test +"</td><td   bgcolor='"+color+"'>and hi again</td><td bgcolor='"+color+"'>hi</td><td bgcolor='"+color+"'>and hi again</td>";

It keeps saying it's undefined for some reason. The ID is the id of the row in my table by the way, it activates a php script to search for the info. But all that works, the php script returns the right value. But it won't print the right value in the table and gives me undefined instead.

Thanks in advance!

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Pointy, Feb 23 '14 at 13:52

score 1 · Accepted Answer · edited May 23 '17 at 11:50

getInfo sets up an XmlHttpRequest object, and then binds an anonymous function to onreadystatechange. This anonymous function doesn't get called when getInfo is called. It's just set up then, to be evaluated later when readystate changes (get it?).

So there is no synchronous return statement encountered through the execution of getInfo. Therefore test is undefined.

So see Pointy's recommended question/answer: How do I return the response from an asynchronous call?

Returned value is undefined even though in console it says it isn't

1 Answers1