CODEWITHSUNDEEP
javascriptphpjqueryajaxweb
user3662531
user3662531

Reputation: 71

Concurrent AJAX requests not working. Newest request overwrites previous request

My webpage features a table where each row has a "+" button so that a mini table appears. The mini table houses data from a super slow database so I am having the data come in through ajax requests. My problem is rooted in a certain situation. Suppose you pressed a plus button causing an AJAX request and while waiting you press another plus button. The second ajax request causes the first request to never come back. In other words the newest request overwrites all previous pending requests. Any idea why this might be happening? I feel like this might just be what happens when you don't use jQuery to handle AJAX but I am not sure and I couldn't find anything that said that was the case. I am appending my code below. Any help is appreciated!

function fetchSINamesForVariantAJAX(latestBuild, variantToExpand){
if (latestBuild ==  "") {
    //document.getElementById(subTableId).innerHTML = ""; 
    return;
} 
else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            spinner.stop();
            var variantRow = variantToExpand + "Row";
            if (document.getElementById(variantRow).rows.length == 1){
                var json = JSON.parse(xmlhttp.responseText);
                var SINames = json['SIs'];
                var locations = json['locations'];
                var SIBuilds = json['SIBuilds'];
                for (var i = 0; i < SINames.length ; i++){
                    var row = document.getElementById(variantRow).insertRow(-1);
                    var cell = row.insertCell(-1);
                    var SILinkURL = "exampleWebsite.com/name.php?names=" + SINames[i];
                    cell.innerHTML = "<a href=\"" + SILinkURL + "\">" + SINames[i] + "</a>";

                    cell = row.insertCell(-1);
                    var fullLocation = locations[i] + "\\" + SIBuilds[i];
                    cell.innerHTML = "<a href=\"" + fullLocation + "\">" + fullLocation + "</a>";

                    cell = row.insertCell(-1);
                    cell.innerHTML = "";
                }
            }
        }
    }
    //create the GET message to be sent using AJAX window
    var stateToSend = "SITableGeneratorFromVariant.php?";
    stateToSend += "latestBuild=" + latestBuild;    
    xmlhttp.open("GET", stateToSend, true);
    xmlhttp.send();
}

}

Upvotes: 0

Views: 147

Answers (1)

Osuwariboy
Osuwariboy

Reputation: 1375

I think the reason is that you overwrite your xmlhttp variable with a new one each time a new AJAX call gets done try declaring it inside the function:

if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

Upvotes: 1

Related Questions