Solved

Using ajax call multiple times

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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'…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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

742 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