Using ajax call multiple times

Hey

I have an ajax function on some of my pages which all work fine individually (see below). However I need to call the function below multiple times from another function eg

function tweak_change(tweak_number, creative_child, counter){
      approve_reverse("approve1", creative_child, counter);
      approve_reverse("approve2", creative_child, counter);
// other code
}
So the function approve_reverse changes 2 elements on the page. My tweak_change function needs to do a bunch of stuff as well as call the approve_reverse function twice in a row for 2 elements.

If called individually they work fine however if called one after another only the last one works.

I have attached a diagram I found that I believe shows what is occurring however I cannot work out what to do to make both requests to the server work.

Cheers

Luke
function approve_reverse(approve_number, creative_child, counter){ 
 
xmlHttp=GetXmlHttpObject();
xmlHttp2=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="approve_reverse.php";
url=url+"?approve_number="+approve_number;
url=url+"&creative_child="+creative_child;
url=url+"&counter="+counter;
//alert (url);
var url2="approve2_reverse.php";
url2=url2+"?approve_number="+approve_number;
url2=url2+"&master_job_key=<?php echo $master_job_key; ?>";
 
//alert (url2);
var element=approve_number+counter;
var element2=approve_number+"B";
 
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    } 
 }
 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
//change on first tab
xmlHttp2.onreadystatechange=function(){
    if(xmlHttp2.readyState == 4) {
     document.getElementById(element2).innerHTML=xmlHttp2.responseText;
    } 
 }
 
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
}

Open in new window

AJAXMultiModel.gif
LVL 9
SnarflesAsked:
Who is Participating?
 
SnarflesConnect With a Mentor Author Commented:
Thanks mplungjan

I got around this by adding an extra flag to my approve_reverse() function to change 3 elements if I set it to 'both' rather than call the approve_reverse function twice. So if either tweak button is pressed it changes the tweak button that is clicked as well as calls

approve_reverse("approve1", creative_child, counter, "off");

Which calls approve_reverse and then also since the last variable 'state' is set to 'off' it initates a 3rd element change within that function.

I was thinking I might have to do this from the start but its not a very elegant solution so I wanted to avoid it. It'll do for me for now though.

Ill paste the code in case it helps anyone else..

Cheers
function tweak_change(tweak_number, creative_child, counter){ 
 
xmlHttp=GetXmlHttpObject();
xmlHttp2=GetXmlHttpObject();
 
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="tweaks.php";
url=url+"?tweak_number="+tweak_number;
url=url+"&creative_child="+creative_child;
url=url+"&userid=<?php echo $userid; ?>";
url=url+"&counter="+counter;
 
//change the name on the first tab
var url2="tweaks2.php";
url2=url2+"?tweak_number="+tweak_number;
url2=url2+"&userid=<?php echo $userid; ?>";
url2=url2+"&creative_child="+creative_child;
url2=url2+"&master_job_key=<?php echo $master_job_key; ?>";
 
var element=tweak_number+counter;
var element2=tweak_number+"B";
 
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    } 
 }
 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
// again for name on first tab
xmlHttp2.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element2).innerHTML=xmlHttp2.responseText;
    } 
 }
 
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
 
//turn off approvals
approve_reverse("approve1", creative_child, counter, "off");
 
}
 
function approve_reverse(approve_number, creative_child, counter, state){ 
 
xmlHttp=GetXmlHttpObject();
xmlHttp2=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  } 
var url="approve_reverse.php";
url=url+"?approve_number="+approve_number;
url=url+"&creative_child="+creative_child;
url=url+"&counter="+counter;
url=url+"&state="+state;
 
var url2="approve2_reverse.php";
url2=url2+"?approve_number="+approve_number;
url2=url2+"&master_job_key=<?php echo $master_job_key; ?>";
 
var element=approve_number+counter;
var element2=approve_number+"B";
 
xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    } 
 }
 
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
 
//change on first tab
xmlHttp2.onreadystatechange=function(){
    if(xmlHttp2.readyState == 4) {
     document.getElementById(element2).innerHTML=xmlHttp2.responseText;
    } 
 }
 
xmlHttp2.open("GET",url2,true);
xmlHttp2.send(null);
 
if (state == "off" || state == "on"){
	var xmlHttp3;
	xmlHttp3=GetXmlHttpObject();
	var url3="approve_reverse.php";
	url3=url3+"?approve_number=approve2";
	url3=url3+"&creative_child="+creative_child;
	url3=url3+"&counter="+counter;
	url3=url3+"&state="+state;
 
	var element3="approve2"+counter;
	
	xmlHttp3.onreadystatechange=function(){
    if(xmlHttp3.readyState == 4) {
     document.getElementById(element3).innerHTML=xmlHttp3.responseText;
    	} 
 	}
	xmlHttp3.open("GET",url3,true);
	xmlHttp3.send(null);
	}
}

Open in new window

0
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Put the values in an array and call a function in the readystate anonymous function

var cnt = 0;
function approval(name,child,counter) {
  this.name = name;
  this.child = child;
  this.counter = counter;
}
var approvals = new Array(
  new approval("approve1", creative_child, counter),
  new approval("approve2", creative_child, counter)
);

function tweak_change() {
  if (cnt>=approvals.length) return;
  approve_reverse(approvals[cnt].name, approvals[cnt].child, approvals[cnt].counter);
  cnt++
}

.
.


xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState == 4) {
     document.getElementById(element).innerHTML=xmlHttp.responseText;
    tweak_change(); // second one
    }
 }

tweak_change(); // first one
0
 
SnarflesAuthor Commented:
Hey mplungjan, thanks for the suggestion.

The trouble still seems to be that the first request is still overwritten by the 2nd request before it can be completed so that it only changes the 2nd request.
0
 
Michel PlungjanIT ExpertCommented:
you can only have 1 request at a time
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.