Question

I am using a fair amount of AJAX with XML Http Requests in my website. For a seemingly random few AJAX calls, I’m not able to get all of my javascript in the onreadystatechange function to execute properly unless I have an alert call that I’m guessing pauses the execution enough for it to finish running the PHP script on the server. Here’s an example of what I’m talking about:

Javascript

xmlHttp=getXMLHttp();   //function returns an xmlhttp object to use
//get parameters ready
param="id=5"
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        s=xmlHttp.responseText;
        var myJson = eval("("+s+")");
        document.getElementById('Elem1').value=myJson.Result1;
        document.getElementById('Elem2').value=myJson.Result2;
        triggerEvent(document.getElementById('Elem3'),'onblur');
        document.getElementById('Elem4').value=myJson.Result3;
        document.getElementById('Elem5').value=myJson.Result4
        var sel = document.getElementById('Elem6');
        var i;
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result5){
                sel.selectedIndex = i;
                break;
            }
        }
        document.getElementById('MfgCustNum').value=myJson.Result6;
        document.getElementById('MfgOrderNum').value=myJson.Result7;
        document.getElementById('OrderDatePicker').value=myJson.Result8;
        document.getElementById('ShipDatePicker').value=myJson.Result9;
        document.getElementById('CancelDatePicker').value=myJson.Result10;
        document.getElementById('PO Number').value=myJson.Result11;
        //for some reason, the following 2 lines are where I'm having issues without an alert box
 document.getElementById('NewElement').value=myJson.Result12;
     document.getElementById('NewElement2').value=myJson.Result13;
 //everything else loads properly
        sel = document.getElementById('SelectBox1')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result14){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox2')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result15){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox3')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result16){
                sel.selectedIndex = i;
                break;
            }
        }
        sel = document.getElementById('SelectBox4')
        for(i=0;i<sel.length;++i){
            if(sel.options[i].value==myJson.Result17){
                sel.selectedIndex = i;
                break;
            }
        }
    }
}
xmlHttp.open("POST","../ServerCall.php",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(params);

The PHP script I’m running is a simple query on a DB that is echo’d as a JSON array

    $dc->connect();
    $query = "SELECT COLUMNS FROM TABLE"
    $res = $dc->queryDb($query);
    if(!$res){
        exit();
    }
    $ary = $dc->resultsToArray($res);
    $JSON_ARRAY=array();
    foreach($ary[0] as $key=>$value){
        if(!is_numeric($key))
            $JSON_ARRAY[$key]=$value;
    }
    echo json_encode($JSON_ARRAY);

This is becoming a pretty big problem for me as its now happened in 3 or 4 different parts of my code, yet putting in an alert dialog with the response text shows everything is running properly. I’ve tried running the AJAX call synchronously instead of asynchronously but it didn’t help. I’ve also tried using settimeout to delay running the code for a second or two, but I had mixed results with that and I would prefer to not have to set a specific delay for the scripts to run.

EDIT:
To answer some of the questions in the comments:
For this code snippet, the problems are with the following 2 lines:

 document.getElementById('NewElement').value=myJson.Result12;
 document.getElementById('NewElement2').value=myJson.Result13;

If I Put an alert box right before that line to get the text of myJson.Result12, the elements get filled in properly on my page. Without it, they are left blank and no errors are seen in Firefox’s Error Console

This code is running off an onclick. I’m using DataTables and when someone double clicks a row in my table, the page gets populated with the contents. Again, everything is working fine with the exception of the 2 new elements I added earlier today. The bigger concern is more about how this seems to be a recurring issue in my code.

Also, I’ve tried out jQuery’s AJAX call, but haven’t had much luck with it and most of my code was already written using xmlHttp with just JS.

Answer 1

So now, the data seems to load in just fine with no alert box to pause the script. I’m not sure what’s different now from earlier, but I’m going to keep trying to reproduce the error. I’m wondering if the problem is based on the browser or computer I’m using more than the code itself not working properly. Or maybe the database is slower to respond causing some issues. FWIW, the columns I was trying to receive, while not filled with much data had the largest max-size of all the columns I was trying to select.

Thanks to everyone for your help. There is definitely a lot of good advice about using AJAX in the comments.