Question

I’m fairly new to ajax but am trying to implement two simple calls to dynamically changes two separate divs on a page using javascript. I have no problems using one call at a time, but when I use two it seems like the second xmlhttprequest takes over the first and writes into both divs.

I’ve read and tried using the fixes listed on these two other posts both neither seem to work in my case:

Sending two Ajax requests to two different PHP scripts from single javascript function

Using two xmlhttprequest calls on a page

And here is my relevant code:

function request_handler(url, params, changed_div) {
    if(window.XMLHttpRequest) {
            try {
                    req = new XMLHttpRequest();
            }catch(e) {
                    req = false;
            }
    }else if(window.ActiveXObject) {
            try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e) {
                    try {
                            req = new ActiveXObject("Microsoft.XMLHTTP");
                    }catch(e){
                            req = false;
                    }
            }
    }

    if(req) {
              req.onreadystatechange = function(){
                    if (req.readyState == 4 && req.status == 200){
                                    document.getElementById(changed_div).innerHTML = req.responseText);

                    }
            }

            req.open("POST", url, true);
            req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            req.send(params)
            return true;
    }

    return false;
}

Here is the basic format of each request using the function above:

request_handler("sample.php", parameters , "sample_div");

Apologies if I’m passing something simple up here, I just can’t seem to get it to work.

Answer 1

This question

Using two xmlhttprequest calls on a page

does answer your question.

In your request_handler function, you’re using a global variable req that gets overwritten every time you call that function.

If you change it to start:

function request_handler(url, params, changed_div) {
    var req;
    // Rest of your function
}

you should find that it works. In this case req has a local scope and so is not overwritten when you call request_handler for the second time.

Can I also suggest that you strongly consider using the likes of jQuery, Prototype or Dojo, if you’re planning on writing Ajax scripts? Writing scripts that work cross-browsers is hard to do well and these frameworks do a lot of the legwork for you.