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:
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):
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):
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.
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
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??
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):
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.
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):
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.
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):
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.