Javascript only execute the last function called

Question

I want my page to execute the same function 3 times, calling for 3 different things each time.

The code is currently

 <script>
 ajaxGet('/goget.php?name='+edit.dep.value, 'dep_result');
 ajaxGet('/goget.php?name='+edit.arr.value, 'arr_result');
 ajaxGet('/goget.php?type='+edit.reg.value, 'reg_result');
 </script>

But it only executes the last call. Why?

Javascript:

var XMLHttpRequestObject = false;

if (window.XMLHttpRequest) {

XMLHttpRequestObject = new XMLHttpRequest();

} else if (window.ActiveXObject) {

XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}

function ajaxGet(ajaxLoadData, changeToID) {

if(XMLHttpRequestObject) {

    var obj = document.getElementById(changeToID);
    XMLHttpRequestObject.open("GET", ajaxLoadData);
    XMLHttpRequestObject.onreadystatechange = function() {

    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status ==     200) {

        obj.innerHTML = XMLHttpRequestObject.responseText;

    }
}

    XMLHttpRequestObject.send(null);

}
}

How did this get a +1? You haven't posted enough code for anybody to debug. Please post ajaxGet. — Dave
– Dave, Commented Aug 4, 2013 at 22:53
Did you get any error messages in the console? Maybe the first call already causes an error and that's why the next calls will never get executed. — basilikum
– basilikum, Commented Aug 4, 2013 at 22:53

Jonathan Lonowski · Accepted Answer · 2013-08-04 23:07:49Z

3

You'll want to have each call to ajaxGet create its own XMLHttpRequest.

An XMLHttpRequest can only handle 1 request at a time. And, since they'll be making the request asynchronously, they'll be processing in parallel rather than sequentially.

function ajaxGet(ajaxLoadData, changeToID) {
    var obj = document.getElementById(changeToID);
    var xhr = new XMLHttpRequest();

    xhr.open("GET", ajaxLoadData);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            obj.innerHTML = xhr.responseText;
        }
    };
    xhr.send(null);
}

Granted, browsers generally limit requests to only a few at a time (usually 2), queuing any additional. But your code shouldn't count on that.

Side note: Unless you need to support IE6 or older, you shouldn't need to fallback to ActiveXObject.

edited Aug 4, 2013 at 23:07

answered Aug 4, 2013 at 23:02

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrik BoXon Nicklasson Over a year ago

Thank you! I was using a function from an old website i created years ago. :-)

Ravi K Thapliyal · Accepted Answer · 2013-08-04 23:05:00Z

You need to change your ajaxGet() method to instantiate a new XMLHttpRequest object at every call. Since, you're using the same XMLHttpRequest every new request is overwriting the previous one.

Hence, you're getting the results returned by the last method call only.

function getXHRObj() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function ajaxGet(ajaxLoadData, changeToID) {
    var XMLHttpRequestObject = getXHRObj();
    var obj = document.getElementById(changeToID);
    XMLHttpRequestObject.open("GET", ajaxLoadData);
    XMLHttpRequestObject.onreadystatechange = function() {
        if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
            obj.innerHTML = XMLHttpRequestObject.responseText;
        }
    }
    XMLHttpRequestObject.send(null);
}

Collectives™ on Stack Overflow

Javascript only execute the last function called

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related