1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

calling two functions from event

Discussion in 'JavaScript' started by tanvirtonu, Jun 14, 2009.

0
Page 1 of 2
  1. #1
    I have two javascript functions on html body load event.Two functions create a table populating data from the same table.One table show single field and another several fields.Two tables are placed in two different places (using different div id).But as the page loads only one table is shown(second one).If I call each function one at a time from onload event both works fine but as I place two functions together only one is executed.What is the problem?PLs help.

    The following is my body load event html
    <body onload="getCusName();getCusInfo()">
    HTML:
     
    tanvirtonu, Jun 14, 2009 IP
  2. Bohra

    Bohra Prominent Member

    Messages:
    12,573
    Likes Received:
    537
    Best Answers:
    0
    Trophy Points:
    310
    #2
    <body onload="getCusName(); getCusInfo();">

    Try the above code
     
    Bohra, Jun 14, 2009 IP
  3. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Actually I tried with that <body onload="getCusName(); getCusInfo();"> but didn't work.
     
    tanvirtonu, Jun 14, 2009 IP
  4. Bohra

    Bohra Prominent Member

    Messages:
    12,573
    Likes Received:
    537
    Best Answers:
    0
    Trophy Points:
    310
    #4
    Bohra, Jun 14, 2009 IP
  5. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I have used the following code.Yet, any one is working. getCusName() is not
    working.But if I just put them one at a time, they both works.Weird problem!
    Pls help me out.
    function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//add body onload events serially
addLoadEvent(getCusName);
addLoadEvent(getCusInfo);
    Code (markup):
     
    tanvirtonu, Jun 14, 2009 IP
  6. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #6
    Unni krishnan, Jun 14, 2009 IP
  7. Bohra

    Bohra Prominent Member

    Messages:
    12,573
    Likes Received:
    537
    Best Answers:
    0
    Trophy Points:
    310
    #7
    Are the function clashing ? can u post the functions here
     
    Bohra, Jun 14, 2009 IP
  8. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I forgot to tell that I m using php-ajax.As I said both my functions work well if they are called one at a time,separately.
    
[QUOTE][QUOTE]<script type="text/javascript" >
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//add body onload events serially
addLoadEvent(getCusName);
addLoadEvent(getCusInfo);

//for getting customer names only
function getCusName() 
{ 
//var url="phpdb.php?name="+name+"&city="+city;
xmlhttp.open("GET","customerdb.php",true); 
xmlhttp.onreadystatechange = updateName;
xmlhttp.send(null); 

}

function updateName() 
{  
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("showCustomer").innerHTML = response; 
  } 
}
//for getting customer other info.
function getCusInfo()
{
xmlhttp.open("GET","navigateAjax.php",true); 
xmlhttp.onreadystatechange = updateCusInfo;
xmlhttp.send(null); 

}

function updateCusInfo() 
{ 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("navDiv").innerHTML = response; 
  } 
}</script>
    Code (markup):
     
    tanvirtonu, Jun 15, 2009 IP
  9. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #9
    This is a major problem that occurs when you use AJAX for database transactions.
    I had the same problem in one of my projects an year back.
    This happens as a result of simultaneous ajax calls.
    You cannot have simultaneous AJAX calls, however you can have subsequent AJAX calls.
    View this thread for more info:
    http://www.webdeveloper.com/forum/showthread.php?t=172966

    Hope this helps.
     
    Unni krishnan, Jun 15, 2009 IP
  10. FDIM

    FDIM Member

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #10
    i had this problem too, and i solved it. Browser takes cares of ajax multi calls. All you need to do is to avoid global variables whne using ajax. For example try somethign like this:
    
var ajax=getXmlHttpObject() //create function that will return xmlHttp object and use it everytime you make ajax call
    Code (markup):
    dont forget to use "local variable" if you use same name for ajax calls. This worked for me. I hope it wil work for you :)
     
    FDIM, Jun 15, 2009 IP
  11. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thank u all Brothers.U all are really GREAT.
    I have one more question what if I add an external javascript file(.js) in src atttribute.Will it work as usually.Will there be any problem or clash with anything??
     
    tanvirtonu, Jun 15, 2009 IP
  12. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Sorry to respond late but I tried modifying my code.But it still has the same problem.Only the secode function works.But individually both works.If I trywith simple multiple alert function they all work together but only the getCusName doesnt work though it works alone.

    
<script type="text/javascript" >
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//add body onload events serially

addLoadEvent(getCusName);
addLoadEvent(getCusInfo);
addLoadEvent(function() { 
	    document.body.style.backgroundColor = '#EFDF95'; 
	}) 
addLoadEvent(function() { 
	    alert("XXXXX"); 
	}) 
addLoadEvent(function() { 
	    alert("AAAAAAAAA"); 
	}) 

function getXMLHttp()
{
var xmlhttp = false; 
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlhttp;
}

function getCusName() 
{ 
//var url="phpdb.php?name="+name+"&city="+city;
xmlhttp=getXMLHttp();
xmlhttp.open("GET","customerdb.php",true); 
xmlhttp.onreadystatechange = updateName;
xmlhttp.send(null); 

}

function updateName() 
{  
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("showCustomer").innerHTML = response; 
   } 
}

function getCusInfo()
{
xmlhttp=getXMLHttp();
xmlhttp.open("GET","navigateAjax.php",true); 
xmlhttp.onreadystatechange = updateCusInfo;
xmlhttp.send(null); 

}

function updateCusInfo() 
{ 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("navDiv").innerHTML = response; 
  } 
}
</script>
    Code (markup):
     
    tanvirtonu, Jun 17, 2009 IP
  13. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I m still waiting for a reply.Pls help me brothers.Where are u all now?
     
    tanvirtonu, Jun 18, 2009 IP
  14. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #14
    Well basically, as i hav earlier said this happens due to clash between simultaneous ajax calls.
    This is more prominent if u hav db operations as requests.
    Sometimes the two functions may work properly if you have an alert or two, in between them.
    But thats not a solution to the problem.

    One method is to call one function and delay the operation of the second one till the first completes using some settimeout function.
    Or you can have the second function called from the first one's readystatechange function finishes.

    While both methods have there own disadvantges, you can give it a try, if you dont have any options left.

    Hope this helps.
     
    Unni krishnan, Jun 18, 2009 IP
  15. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #15
    What i wanted to say is try like this, and see whether it works.

     
    Unni krishnan, Jun 18, 2009 IP
  16. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Brother Unni krishnan, it is really a co-incidence that I exactly did the same two things that you have suggested.I had done it before you told me that.First,I tried putting two alert functions in between the two ajax request to see whether they work well and amazingly not only did they work but also the two ajax request worked.Then I guessed that there must be a request clash for simultaneous ajax call.Then I used the following code using setTimeout() so that each ajax request gets a time to finish before the other, and it worked.
    BUT THE PROBLEM STILL REMAINS. What about the suggestions made by brother FDIM above-using different XMLHttpRequest object, it sounded logical to me but when I tried, it didnt work- why? And do I have to stick to this solution? It works but doesn't seem optimum solution to me.Is there any way out?
    Very many thanx for keeping in touch.

    addLoadEvent(getCusName);
addLoadEvent(function() { 
	    document.body.style.backgroundColor = '#EFDF95'; 
	}) 
addLoadEvent(    setTimeout("getCusInfo()",500)  );
addLoadEvent(    setTimeout("gettotalPages()",800)  );
    Code (markup):
     
    tanvirtonu, Jun 19, 2009 IP
  17. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #17
    erm. don't use a timeout, you have no guarantees when the first one will finish. 3 things you can do - and somebody said one of them already...

    1. change your code to use a local and not global scope!

    in both functions you go:
    xmlhttp=getXMLHttp();

    since you do not prefix this with 'var', javascript interprets xmlhttp as a part of the global namespace... and then the 2-nd function overwrites it.

    2. ajax can be synchronous and asynchronous. The difference is that by default threads can be forked whereas with asynchronous xhttp requests, they need to wait on each other. in fact, all js will wait for the ajax request to end and thus you can sequentially execute the functions.

    3. call just the first function within the onload, then at the bottom of said first function within the readystate bit, call the 2-nd function.
     
    dimitar christoff, Jun 20, 2009 IP
  18. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #18
    Have you tried this option:
    Same as what Dimitar Christoff told,
     
    Unni krishnan, Jun 21, 2009 IP
  19. tanvirtonu

    tanvirtonu Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Brother 'dimitar christoff' are u telling me to do the following-
    <script type="text/javascript" >
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
//add body onload events serially

addLoadEvent(getCusName);
addLoadEvent(getCusInfo);
addLoadEvent(function() { 
	    document.body.style.backgroundColor = '#EFDF95'; 
	}) 
function getXMLHttp()
{
var xmlhttp = false; 
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlhttp;
}

function getCusName() 
{ 
//var url="phpdb.php?name="+name+"&city="+city;
var xmlhttp=getXMLHttp();
xmlhttp.open("GET","customerdb.php",true); 
xmlhttp.onreadystatechange = updateName(xmlhttp);
xmlhttp.send(null); 

}

function updateName(xmlhttp) 
{  
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("showCustomer").innerHTML = response; 
   } 
}

function getCusInfo()
{
var xmlhttp=getXMLHttp();
xmlhttp.open("GET","navigateAjax.php",true); 
xmlhttp.onreadystatechange = updateCusInfo(xmlhttp);
xmlhttp.send(null); 

}

function updateCusInfo(xmlhttp) 
{ 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("navDiv").innerHTML = response; 
  } 
}
</script>
    Code (markup):
    I have tried the above but something is wrong with my code.Can anybody tell me if it is correct.This is not working.

    Should I try the following way as suggested by brother Unni krishnan and dimitar christoff - " you can have the second function called from the first one's readystatechange function finishes. "
    
function updateCusInfo(xmlhttp) 
{ 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
  { 
   response=xmlhttp.responseText;
   document.getElementById("navDiv").innerHTML = response; 
  } 
 getCusInfo();
}
    Code (markup):
     
    tanvirtonu, Jun 22, 2009 IP
  20. Unni krishnan

    Unni krishnan Peon

    Messages:
    237
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    0
    #20
    Why dont you try th second option along with using two different xmlHttp objects. Try this.
    Not sure whether it works, but worth a try.

    <script type="text/javascript" >

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(getCusName);

function getXMLHttp()
{
var xmlhttp = false; 
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
return xmlhttp;
}

function getCusName() 
{ 

var xmlhttp1=getXMLHttp();
xmlhttp1.open("GET","customerdb.php",true); 
xmlhttp1.onreadystatechange = updateName(xmlhttp);
xmlhttp1.send(null); 

}

function updateName(xmlhttp) 
{  
  if(xmlhttp1.readyState == 4 && xmlhttp1.status == 200) 
  { 
   response=xmlhttp1.responseText;
   document.getElementById("showCustomer").innerHTML = response; 
  } 
  getCusInfo();
}

function getCusInfo()
{
var xmlhttp2=getXMLHttp();
xmlhttp2.open("GET","navigateAjax.php",true); 
xmlhttp2.onreadystatechange = updateCusInfo(xmlhttp);
xmlhttp2.send(null); 

}

function updateCusInfo(xmlhttp) 
{ 
  if(xmlhttp2.readyState == 4 && xmlhttp2.status == 200) 
  { 
   response=xmlhttp2.responseText;
   document.getElementById("navDiv").innerHTML = response; 
  } 
}
</script>
    Code (markup):
    Hope this helps.
     
    Unni krishnan, Jun 22, 2009 IP
Page 1 of 2