Solved

Using ajax call multiple times

Posted on 2008-06-22
4
879 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
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…

948 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

23 Experts available now in Live!

Get 1:1 Help Now