I have an HTML button that once a user presses it , it preforms the following POST (to the same issue.php
page):
var params = "Bloodtype=" + encodeURIComponent(Bloodtype);
var url = "issue.php?" +params;
var request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function()
{
if(request.readyState == 4 && request.status == 200)
{
checkDoner();
}
}
request.send(params);
Once the request has been made, PHP code goes on checking the database for a match - if there is a match I set a php variable isDoner = 1
, else isDoner=0
.
The function checkDoner()
echos the PHP var isDoner
and checks for its value - and by that value I need to show/hide a certain div in the html code.
I have checked all PHP var values after the post - they all have the values that they should have - the problem is when I pass them to JS they are always null.
This is the checkDoner()
function :
function checkDoner()
{
var isDoner = "<?=json_encode($isDoner) ?>";
if(isDoner == null)
{
console.log("In isDoner 1");
document.getElementById('positiveAnswer').style.display = 'none';
document.getElementById('negativeAnswer').style.display = 'none';
}
else if(isDoner == '0'){
console.log("In isDoner 2,DONER :" + isDoner);
document.getElementById('negativeAnswer').style.display = 'block';
}
else if(isDoner == '1'){
console.log("In isDoner 3");
document.getElementById("pName").innerHTML = "<? echo json_encode($doners['Name']) ?>";
//$doners array is initiated to null and gets values after post
document.getElementById("pId").innerHTML = "<? echo json_encode($doners['Id'])?>";
document.getElementById("pBloodtype").innerHTML = "<?echo json_encode($doners['Bloodtype'])?>";
//document.getElementById("pName").innerHTML = <?=json_encode($doners['Name'])?>;
//document.getElementById("pId").innerHTML = <?=json_encode($doners['Id'])?>;
//I tried both ways
document.getElementById('positiveAnswer').style.display = 'block';
}
}
In issue.php page, just like chris said you can detect if request is ajax or not, via header or you can also do this by sending a get parameter 'ajaxRequest=1'. And when 'ajaxRequest' is set in $_GET, you need to echo only json object and exit.
Your issue.php would look something like this
if(!empty($_GET["ajaxRequest"])) {
$data = array();
..... your code to get insert values in $data ....
..... add $data["isDoner"] = YOUR VALUE .....
..... add $data["donors"] = YOUR ARRAY .....
echo json_encode($data);
exit();
}
Remember, when you send an ajax request, your entire php code runs on server and whatever data you echo or whatever data you write outside php blocks (< ?php ?>), will be received by browser which you can access through 'request.responseText', where request is XMLHttpRequest object.
Your js should look like this
var params = "Bloodtype=" + encodeURIComponent(Bloodtype) + "&ajaxRequest=1";
var url = "issue.php?" +params;
var request = new XMLHttpRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function()
{
if(request.readyState == 4 && request.status == 200)
{
checkDoner(request.responseText);
}
}
request.send(params);
function checkDoner(response)
{
var isDoner = null, donors=null;
try {
response = JSON.parse(response);
isDoner = response.isDoner;
donors = response.donors;
}
catch(e){ }
if(isDoner == null)
{
console.log("In isDoner 1");
document.getElementById('positiveAnswer').style.display = 'none';
document.getElementById('negativeAnswer').style.display = 'none';
}
else if(isDoner == '0'){
console.log("In isDoner 2,DONER :" + isDoner);
document.getElementById('negativeAnswer').style.display = 'block';
}
else if(isDoner == '1'){
console.log("In isDoner 3");
document.getElementById("pName").innerHTML = donors.Name;
//$doners array is initiated to null and gets values after post
document.getElementById("pId").innerHTML = donors.Id;
document.getElementById("pBloodtype").innerHTML = donors.Bloodtype;
//document.getElementById("pName").innerHTML = donors.Name;
//document.getElementById("pId").innerHTML = donors.Id;
//I tried both ways
document.getElementById('positiveAnswer').style.display = 'block';
}
}