Problem with xmlhttp.readystate and xmlhttp.status

[pompopom]

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?

[felgall]

Are you returning something from insertrapport.php? A single space should be enough to give a status of 200 so as to let the calling script know that it completed successfully.

[pompopom]

- 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

Are you returning something from insertrapport.php? A single space should be enough to give a status of 200 so as to let the calling script know that it completed successfully.

Thx for your time.

Yes I did that, but to no avail...

[pompopom]

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?

Like I mentioned in the end of my starting post, the only difference was that the 'button' styled link was not within a <form></form>.

So I redid some coding:
Added <form></form>
Changed the button styled <a onClick=...></a> with a <input type="button" onClick=... />

And it works! Never thought that would do the trick... Can anyone shine a light on this behaviour?

EDIT: Even without the <form></form> tags it works, as long as the input is a button not an <a>