Home/ Questions/Q 493935
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T05:27:05+00:00

I will try to explain my problem. I have 4 files index.html, event.js, start.js

  • 0

I will try to explain my problem. I have 4 files index.html, event.js, start.js and form.php.

index.html

<head><script type="javascript/text" src="start.js></script></head>
<html>
<button id="bt" type="button">Click</button>
<div id="test"></div>
</html>

start.js

window.onload=init;
function init(){
document.getElementById("bt").onclick=function(){
getFile('form.php?x='+Math.random()*11, getPHP);
getFile('javascripts/event.js?x='+Math.random()*11,getJS);
}
}
function getFile(source,callFunc){
var xmlHttpR=false;
if (window.XMLHttpRequest)
xmlHttpR=new XMLHttpRequest();
else if (window.ActiveXObject)
xmlHttpR=new ActiveXObject("Microsoft.XMLHttp");
else
alert("Error");
if (xmlHttpR){
xmlHttpR.open("GET",source,true);
xmlHttpR.onreadystatechange=function(){
if (xmlHttpR.readyState==4 && xmlHttpR.status==200){
callFunc(xmlHttpR);
delete xmlHttpR;
xmlHttpR=null;
}
}
}
xmlHttpR.send(null);
}

function getPHP(response){
document.getElementById("test").innerHTML=response.responseText;
}

function getJS(response){
eval(response.responseText);
}

event.js

document.getElementById("firstName").onblur=function(){
validate(this.name,this.value);
}

form.php

<html>
<form>
<input type="text" id="firstName" value="">
</form>
</html>

OK, the problem now, when onblur event is triggered on firstName nothing happens but when I refresh the page sometimes once or twice, the event is working as it should be. Maybe I’m getting the response not at the right time?

Is there something wrong with the callback function and the eval and I use to assign onblur event to the firstName field?

is the problem with the AJAX asynchronous call? Should I use synchronous? What am I missing?

I hope I could explain clearly what the problem is.

Thanks in advance for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    yeah, it sounds like a race condition between the asynchronous calls. sometimes the JS returns first and sometimes the PHP returns first.

    you could try loading the JS as part of the callback for the PHP ajax call.

    something like this should work:

    EDIT:
    pass response through anonymous function and down to getPHP

    getFile('form.php?x='+Math.random()*11, function(response) {
    getPHP(response);
    getFile('javascripts/event.js?x='+Math.random()*11,getJS);
});
    • 0