CODEWITHSUNDEEP
ajax
einav
einav

Reputation: 573

Two Ajax calls on one page return only one result

I'm new to ajax, did some tutorials and managed a few ajax calls successfully. I am now trying to create multiple calls to an ajax object on one page, and can't make it work.

My goal is that one click of the user will fire two ajax calls, each returning a response to a different div.

I did manage creating two such calls, and Firebug shows me they both return the desired ResponseText, but only the second one actually shows on the page.

This is my basic ajax function:

function ajaxFunction()
{
try
    {// Opera 8.0+, Firefox, Safari
    myAjax = new XMLHttpRequest();
    }
catch (e)
    {// Internet Explorer Browsers
    try
        {
        myAjax = new ActiveXObject("Msxml2.XMLHTTP");
        }
    catch (e)
        {
        try
            {
            myAjax = new ActiveXObject("Microsoft.XMLHTTP");
            }
        catch (e)
            {// Something went wrong
            alert("browser too old");
            return false;
            }
        }
    }
}

And this is the function that activates the ajax:

function ajaxCaller(url, params, div)
{
    ajaxFunction();

    myAjax.open("POST",url,true);
    myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    myAjax.setRequestHeader("Content-length", params.length);
    myAjax.setRequestHeader("Connection", "close");


    myAjax.onreadystatechange=function()
      {
      if (myAjax.readyState==4 && myAjax.status==200)
        {
        document.getElementById(div).innerHTML=myAjax.responseText;
        }
      }

    myAjax.send(params);

}

And this is the JS code supposed to fire both calls one after the other:

var myDiv = "sons_of_" + type + id
var params = "id=" + id + "&type=" + type;
ajaxCaller ("places_proc.php",params,myDiv);

var params = "con=" + id;
ajaxCaller ("places_proc2.php",params,'ctryDiv');

As I said, the only response that gets displayed is the second instance of the ajaxCaller (switching the order between the two calls, switches the results that get displayed).

I assume the results of the second call overwrite those of the first one, but being a newbie to this, I don't understand what is the exact stage where it happens.

I'd appreciate any pointers as to what I'm doing wrong.

(I understand JQuery or the like could help me here, but since I'm new to it, I'd like to write it myself first, and rely on shortcuts only at a later stage)

Thanx.

Upvotes: 0

Views: 1970

Answers (2)

Alex K.
Alex K.

Reputation: 175766

the second instance of the ajaxCaller ..

There are only single instances of everything in your example, there is a single global myAjax that you setup in the first call then immediately replace in the 2nd call.

You can change your pattern by declaring myAjax within ajaxFunction 

function ajaxFunction() {
  var myAjax;
  ...

then returning it at the end (return myAjax;), when it holds a new XMLHttpRequest

Then to get a reference to this new instance in your worker function simply;

function ajaxCaller(url, params, div)
{
  var myAjax = ajaxFunction();
  ...

Upvotes: 1

Boundless
Boundless

Reputation: 2464

You are overwritting the first value in your variable "myAjax" by assigning it a second value. It would be just like doing something like 

var x=5;
x=7;
alert(x);

Here x would hold the value of 7, because that was the last value assigned to it.

This function 

myAjax.onreadystatechange=function()
      {
      if (myAjax.readyState==4 && myAjax.status==200)
        {
        document.getElementById(div).innerHTML=myAjax.responseText;
        }
      }

will be called when the server you are calling returns a response. When the first call returns myAjax will be holding the value of the second call already, making the first call not display anything. You need to either assign these two variables synchronously (one after the other one has completed), or assign them to different variable names.

Upvotes: 0

Related Questions