I have an ajax variable issue and I can't seem to figure out what is causing it. The issue happens at the line:
var ajax = ajaxObj("POST", "feedback.php");
I reach the before alert but not the after.
<script>
function toShow(elem){
var id = elem.value;
var x = elem.checked;
alert("before");
var ajax = ajaxObj("POST", "feedback.php");
alert("after");
ajax.onreadystatechange = function() {
_("status").innerHTML = "saving to feedback DB...";
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "update_success"){
status.innerHTML = ajax.responseText;
_("status").innerHTML = "it didn't work";
} else {
_("status").innerHTML = "updated";
}
}
}
ajax.send("id="+id+"&x="+x);
}
</script>
Any ideas what is causing this? This same piece for code works on other pages.
here is my ajaxObj function:
function ajaxObj( meth, url ) {
var x = new XMLHttpRequest();
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
I think somewhere in your scope, x is being clobbered. You use it in pretty much every function and the scope chain will silently punish you for it once you make a mistake. I can guarantee that changing those x references to meaningful names will solve this.
The problem is unlikely to be in the code block since it works most times. Something is clobbering it.
It's similar to a problem I had not too long ago: https://twitter.com/akamaozu/status/525494000288284672
That is to say ... x is being overwritten somewhere. I don't know where since it'll take a much deeper look at your code to identify where the real problem is, but change those x variables to something that actually makes sense. This will do two things: