Home/ Questions/Q 6232177
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:04:20+00:00

I’m calling 2 JS functions(Ajax) each of which are returning data from the server.But

  • 0

I’m calling 2 JS functions(Ajax) each of which are returning data from the server.But the 2nd function gets the responsetext of the 1st function.

one thing i observed is,if i use 1 or more alerts in the functions(to know what the data is) before using it(printing an image and displaying an anchor) it works fine as in — given a bit of delay(i’m guessing) its working fine,without which it fails.

i find this very strange and once i did some searching found this article( http://forums.devnetwork.net/viewtopic.php?f=13&t=117523 ) in which he has a workaround — give a timeout of 1 or .5 sec’s and things will be proper.

Although the workaround seems to get the job done i’m curious to know why the response text is getting values from the previous Ajax.

I know the code is not necessary.but,just in case — its given below

GIST:

1.the alerts when included — the code works fine

2.When the alerts are removed the Anchors are getting displayed but not the image is a Crushed image(Sort of a torn paper kinda image) on checking the image info did i find the data form the previous function — hence Not getting displayed.

<style type="text/css">
.image{
position: relative;
left: 20%;
}
</style>

<script type="text/javascript" >
function create(){
alert("createUid"); // 1st alert with which the code works
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
    var json = eval(xmlhttp.responseText);
    for(i=0;i<json.length;i++){     
        var a = document.createElement("a"); //creates a List of anchors
        a.id="a"+json[i].uid;
        a.style.display="block";
        a.setAttribute("href","#");
        a.setAttribute("onclick","alert("+json[i].uid+")"); 
        a.appendChild(document.createTextNode(json[i].uid));
        document.getElementById("tag").appendChild(a);
        }
    }
}
xmlhttp.open("GET","users.php?send=vivek",true);
xmlhttp.send("NULL");

}
function display(){
alert("pict");
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        var img = document.createElement("img"); 
        img.id="dispPict";
        img.class="image";
        img.setAttribute("alt","ViperRules!!");             
        img.setAttribute("src","data:image/jpg;base64,"+xmlhttp.responseText); // response text is a binary of an image stored in the DB.
        img.style.display="block";
        document.body.appendChild(img);
        //document.getElementById("Tag").appendChild(img);
        }
    }   
xmlhttp.open("GET","users.php?pict=vivek",true);
xmlhttp.send("NULL");
}
 </script>

<body onload=" display(), create();">
<div id="tag" class="image"> </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using the global variable xmlhttp in each function–meaning each function uses the same xmlhttp. The second function called replaces the first function’s xmlhttp onreadystatechange so when the first call returns, it executes the second’s onreadystatechange.

    To fix this, you need to not use a global variable. This can be done by addding var in front of the variable when it’s defined.

    Example:

    <script type="text/javascript" >
function create(){
    alert("createUid"); // 1st alert with which the code works
    var xmlhttp=new XMLHttpRequest();
    ...
}

function display(){
    alert("pict");
    var xmlhttp=new XMLHttpRequest();
    ...
}
</script>
    • 0