?
Solved

Using ajax call multiple times

Posted on 2008-06-22
4
Medium Priority
?
890 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 80 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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

800 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