I am having a problem with calling 2 separate ajax functions. I have a loop that loops through all checkbox elements on the page then if they are checked it calls an ajax function that moves some data in my database. Then outside of the for loop i call another ajax function that goes to my database and pulls the results back to my ID element. I have had to name my httprequests differently so they dont fight, Both functions work but the one outside my loop goes to fast and doesnt pull the new/changed data. If i put an alert before this outside loop function it then works. I have also tried to use a setTimeout(myFunctio(), 3000) with no luck.
Here is my code.
function ungroupContact(){
group = document.getElementsByName("moveGroup")[0].value;
for(i=0;i<=25;i++){
if(document.getElementById('checkBox'+i)){
if(document.getElementById('checkBox'+i).checked){
var email = document.getElementById('checkBox'+i).value;
moveContact(email, group);
}
}
}
//alert("hello");
//setTimeout(alert("hello"),12000);
groupList1(group);
}
This is my first time posting, sorry if this is noobish, currently studying my degree in computer science.
Thanks for any suggestion and/or help
Sorry i should have known to put up the ajax functions. I have used the layout from w3schools.
function moveContact(email, group){
if (email=="" || group=="")
{
document.getElementById("sidebar2").innerHTML="Something wrong was entered";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp1=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function()
{
if (xmlhttp1.readyState==1 || xmlhttp1.readyState==2 || xmlhttp1.readyState==3)
{
document.getElementById("sidebar2").innerHTML="<img src='images/loading.gif' alt='Loading'> ";
}
if (xmlhttp1.readyState==4 && xmlhttp1.status==200)
{
document.getElementById("sidebar2").innerHTML=xmlhttp1.responseText;
}
}
xmlhttp1.open("GET","core/moveContact.php?group="+group+"&email="+email,true);
xmlhttp1.send();
return;
}
You will need to keep track of when the last moveContact()
asynchronous ajax function is done and then (and only then), call groupList1()
.
Since you have not disclosed the moveContact()
code where the ajax calls are probably being done, we can't really recommend specifics on tracking them. One simple technique is to set up a counter of pending ajax calls and in each success handler for the moveContact()
ajax calls, check to see if the counter has now reached zero. If so, you can then call groupList1(group)
.
Assuming you added a completion callback to moveContact()
, you could do it like this:
function ungroupContact(){
group = document.getElementsByName("moveGroup")[0].value;
var contactsRemaining = 0;
for(i=0;i<=25;i++){
if(document.getElementById('checkBox'+i)){
if(document.getElementById('checkBox'+i).checked){
++contactsRemaining;
var email = document.getElementById('checkBox'+i).value;
moveContact(email, group, function() {
--contactsRemaining;
if (contactsRemaining === 0) {
groupList1(group);
}
});
}
}
}
}
function moveContact(email, group, fn){
if (email=="" || group=="") {
document.getElementById("sidebar2").innerHTML="Something wrong was entered";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp1=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function() {
if (xmlhttp1.readyState==1 || xmlhttp1.readyState==2 || xmlhttp1.readyState==3) {
document.getElementById("sidebar2").innerHTML="<img src='images/loading.gif' alt='Loading'> ";
}
if (xmlhttp1.readyState==4 && xmlhttp1.status==200) {
document.getElementById("sidebar2").innerHTML=xmlhttp1.responseText;
// we are done now, so call the finish callback
if (fn) {
fn();
}
}
}
xmlhttp1.open("GET","core/moveContact.php?group="+group+"&email="+email,true);
xmlhttp1.send();
return;
}
You can add callback function on success and in that function execute groupList1
function when all methods finish executing:
var finished = 0;
moveContact(email, group, function() {
if (++finished == 25) {
groupList1(group);
}
});