Hi, 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.