Why is this tiny bit of jQuery messing up the rest of my JavaScript?

Question

I have an area on my page that has tabular data. I am attempting to add in-line editing of the values in each row. I have tried jqGrid, but it will not work for my needs. So, I am attempting a "home brew" version of in-line editing. My table is simple enough:

<table>
    <tbody>
        <tr id="row0" onClick="changeMe(this);">
            <td>
                some value
            </td>
            <td>
                some other value
            </td>
            <td>
                ...
            </td>
        </tr>
        <tr id="rowN" onClick="changeMe(this);">
            <td>
                ...
            </td>
        </tr>
    </tbody>
</table>

When a user clicks anywhere on the TR, I want my JavaScript to change all static text to the proper form inputs. The first two elements of the form are select boxes. The first box needs to be filled in before the second box's options are available. Here is part of the JavaScript I am using to accomplish this:

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"]
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
                        $.each(data,function(key,value){
                            var option = document.createElement("option");
                            var innerValue = document.createTextNode(value);
                            option.appendChild(innerValue);
                            option.setAttribute("value",value);
                            selectBox.appendChild(option);
                        });
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

This is where my problem comes in. when a user clicks the TR, child 0 of the TR, which is a TD with text, should be converted into the appropriate select box, filled with the appropriate data from the database. This, however, is not happening. What is happening, is that child 1 of the TR (i.e., the second TD) is the one being converted instead.

Just as a test, I added a new test array to the function:

var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");

and changed my JavaScript to the following:

function changeMe(row){
    var serviceArray = ["option_1-1","option_1-2","option_1-3","option_1-4","option_1-5"];
    var testArray = new Array("option_2-1","option_2-2","option_2-3","option_2-4","option_2-5");
    for(var i=0; i<2; i++){
        if(row.children[i].children.length == 0){
            var selectBox = document.createElement("select");
            var.setAttribute("id",serviceArray[i]);
            var.setAttribute("name",serviceArray[i]);

            switch(i){
                case 0:
                    $.each(testArray,function(key,value){
                        var option = document.createElement("option");
                        var innerValue = document.createTextNode(value);
                        option.appendChild(innerValue);
                        option.setAttribute("value",value);
                        selectBox.appendChild(option);
                    });
                    selectBox.setAttribute("onChange","someFunction(this.value)");
                    break;
                case 1:
                    selectBox.setAttribute("onChange","someOtherFunction(this.value)");
                    var option = document.createElement("option");
                    option.setAttribute("selected","selected");
                    option.setAttribute("disabled","disabled");
                    var textNode = document.createTextNode("\u2190 choose that first");
                    option.appendChild(textNode);
                    selectBox.appendChild(option);
                    break;
            }
            row.children[i].innerHTML = null;
            row.children[i].appendChild(selectBox);
        }
    }
}

When I make this change, the first TD (child 0) of the TR is changed as it should be.

When I go directly to my dataGetter.php page in the browser, I get the correct data:

["option_2-1","option_2-2","option_2-3","option_2-4","option_2-5"]

I know this is the correct data, because I put an "alert();" just after the "$.each" line, and the proper data was shown in the alert pop-up.

So, I'm not sure what is happening here. It looks like the one line

$.getJSON("./dataGetter.php?qid=" + Math.random(),function(data){
}

is messing up my switch statement, and populating the second TD (child 1) with child 0 and child 1 data both. It's almost like the "break" in "case 0" is being removed, and all the logic is falling through to the second case.

UPDATE: If I add the line "alert(i);" after my for loop, then everything works as it should ... except for the annoying pop-up.

Answer 1

For all those that are interested, I have figured out the problem. It appears that my switch statement was completing before the AJAX return came back. So, I set "async" to "false" and everything worked perfectly.