Solved

Using ajax call multiple times

Posted on 2008-06-22
4
876 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:Snarfles
  • 2
  • 2
4 Comments
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 20 total points
ID: 21855195
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
 
LVL 9

Author Comment

by:Snarfles
ID: 21862088
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21862670
you can only have 1 request at a time
0
 
LVL 9

Accepted Solution

by:
Snarfles earned 0 total points
ID: 21863151
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now