Long time no post 
I want to apologize in advance for the long post.
On a webpage I have a ‘button-styled’ <a></a>
excerpt…
<li>
<a href="" onClick="InsertRapport('.$klas.');">
<img src="/pics/lco_add_rapport.png" />'.$_LANG['IMG']['ADD_RAPPORT'].'
</a>
</li>
As you can see, when the ‘button’ is clicked, a javascript is called and passes a php variable along. => works fine
The function that is called:
function loadXML_post1(postvars,url,cfunc){
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=cfunc;
xmlhttp1.open("POST",url,true);
xmlhttp1.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp1.send(postvars);
}
function InsertRapport(klas){
postvars="klas="+klas;
loadXML_post1(postvars,"/includes/ajax/insertrapport.php",function(){
//alert('readystate: '+xmlhttp1.readyState+' status:'+xmlhttp1.status);
if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
SetSelector(klas,0);
}
});
}
The php script ‘insertrapport.php’ updates a MySQL database => which is working fine
However it has nothing to return to the browser, instead I want another function (SetSelector()) to be called if script finishes and succeeds.
function SetSelector(klas,rapport){
if(klas == 0 && rapport == 0){
var rapport = document.getElementById("selrapport").value;
var klas = document.getElementById("selklas").value;
}
postvars="rapport="+rapport+"&klas="+klas;
loadXML_post1(postvars,"/includes/ajax/setselector.php",function(){
if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
document.getElementById("selector").innerHTML=xmlhttp1.responseText;
GetRapport(klas,rapport);
}
});
}
function GetRapport(klas,rapport){
var loader = "<img src=\\"/pics/lco_clock_small.gif\\" />";
postvars="rapport="+rapport+"&klas="+klas;
document.getElementById("rapport").innerHTML=loader;
loadXML_post1(postvars,"/includes/ajax/getrapport.php",function(){
if(xmlhttp1.readyState==4 && xmlhttp1.status==200){
setTimeout(function(){document.getElementById("rapport").innerHTML=xmlhttp1.responseText;},750);
}
});
}
The first “if” in the SetSelector() function is used when the function is called directly with another element on the page (an onChange from a dropdown) => which works. So the call in SetSelector() for GetRapport() is indeed executed and gives the exact response into
<div id="rapport"></div>
However when InsertRapport() is fired I get a xmlhttp1.readystate == 4 and a xmlhttp.status == 0 (at the Alert() level)
In other words: Why can I nest a Ajax query in one case and why not in the other case? What am I doing wrong?
- I tried to make the InsertRapport function echo something back to a foo div (which I added in the html) in the browser by adding the line: document.getElementById(“foo”).innerHTML=xmlhttp1.responseText; right before I call SetSelector() (This to make it really look the same as SetSelector() ) => no luck
- I read about the security issue about cross-site scripting and implemented an url rewrite, but as everything is on localhost it was destined to be of no help
- I tried creating a separate xmlhttp object for each function => no success
- …
The only thing that pops in mind while I’m writing the Thread is the fact that the InsertRapport() function is not triggered from within a <form> (it’s just a button styled link) whereas the SetSelector(), if fired from the webpage, not from within InsertRapport(), is actually a <form><select onChange=…><option>…</option></select></form>
Could this be the cause?