Question

I want 3 ajax functions to be called simultaneously on an onchange event of a dropdown.

I tried like calling the 2nd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 1st function and 3rd function inside if (xmlhttp1.readyState==4 && xmlhttp1.status==200) of the 2nd function.

But only the 1st function is called ,even second function is not called.
Any other ways to achieve it ?

Below are the functions:

function list1(ob){

    var id= ob;
    var xmlhttp1;

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

    xmlhttp1.onreadystatechange = function(){
        if (xmlhttp1.readyState==4 && xmlhttp1.status==200){
            alert("ajax1");
            list2(id);
        }
    }

    xmlhttp1.open("POST","/ajax/listSites.php",true);
    xmlhttp1.setRequestHeader("Content-type",
                              "application/x-www-form-urlencoded");
    xmlhttp1.send("id="+id);    
}


function list2(obb){

    var idd=obb;
    var xmlhttp;

    if (window.XMLHttpRequest){// 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){
            alert("ajax2");
            list3(idd);
        }
    }

    xmlhttp.open("POST","/ajax/access_points_do_actions.php",true);
    xmlhttp.setRequestHeader("Content-type",
                             "application/x-www-form-urlencoded");
    xmlhttp.
        send("sel_system_id="+idd+
             "&action="+'LIST_SLAVE_FOR_ACCESS_POINT'); 

      }

// only alert ajax1 is displayed

Answer 1

You can just chain asynchronous calls like this:

onchange="Function1(); Function2();"

Update:

Your code:

<select id="se" onchange="javascript:list1(this.value); //this is current code

should be something like:

<select id="se" onchange="Javascript: list1(this); list1(this);">