Passing PHP var from AJAX handler

Hello all,

I'm having a problem with the returning a php variable from my ajax php handler.

I call the handler...

if(ajaxRequest.readyState == 4 || ajaxRequest.readyState == 0){
var ajaxDisplay = document.getElementById('ajaxDiv');
var refreshID = "";
var timeout = "<?=$timeout?>";

ajaxDisplay.innerHTML = ajaxRequest.responseText;
//Change Refresh Timeout Based on Remaining Song Length
refreshID = setTimeout("DoRefresh()", timeout);


DoRefresh() function is the ajax function. What am I doing wrong?

View the HTML source after the page has displayed and check the value of the timeout javascript variable. I don't know PHP but do you really have to put the = sign there?

var timeout = "<?=$timeout?>";

unitedbreaks:

Try structuring it this way:


var AdminResponse = "";

function parseSettings(){

document.getElementById('ajaxDiv').innerHTML = AdminResponse;

}

function obtainSettings(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseText;
parseSettings();
}
else {
alert('Error Admin.php File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "Admin.php"+forceGET, true);
AdminRequest.send(null);
}

Hello all,

I'm having a problem with the returning a php variable from my ajax php handler.

I call the handler...

if(ajaxRequest.readyState == 4 || ajaxRequest.readyState == 0){
var ajaxDisplay = document.getElementById('ajaxDiv');
var refreshID = "";
var timeout = "<?=$timeout?>";

ajaxDisplay.innerHTML = ajaxRequest.responseText;
//Change Refresh Timeout Based on Remaining Song Length
refreshID = setTimeout("DoRefresh()", timeout);


DoRefresh() function is the ajax function. What am I doing wrong?

Simple error <?=$timeout?> should actually read <?=$timeout;?>

ALWAYS put the ; at the end of every PHP command.

View the HTML source after the page has displayed and check the value of the timeout javascript variable. I don't know PHP but do you really have to put the = sign there?

var timeout = "<?=$timeout?>";

Yes, the character is required for the shortcut syntax (http://us2.php.net/echo).

unitedbreaks:

Try structuring it this way:


var AdminResponse = "";

function parseSettings(){

document.getElementById('ajaxDiv').innerHTML = AdminResponse;

}

function obtainSettings(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
AdminResponse = AdminRequest.responseText;
parseSettings();
}
else {
alert('Error Admin.php File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "Admin.php"+forceGET, true);
AdminRequest.send(null);
}


I will try this, thank you Ancora.

Simple error <?=$timeout?> should actually read <?=$timeout;?>

ALWAYS put the ; at the end of every PHP command.

No, the semi-colon is not required for the shortcut syntax (http://us2.php.net/echo).

It's not working Ancora :confused:

Here is my full AJAX call..

function DoRefresh(){
var ajaxRequest; // AJAX Var

//Do Browser Support Code

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Error Alert
alert("AJAX Browser Error: Cannot Load Radio Information. Please Download The Latest Mozilla Firefox or Internet Explorer Browser.");
return false;
}
}
}

// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 1){

var imgeffect = document.getElementById('imgeffect');

if (document.getElementById('imgeffect').style.visibility == "hidden")
{
var loading = document.getElementById('loading');
var loadingdone = document.getElementById('loadingdone');

document.getElementById('imgeffect').style.visibility = "visible";
loading.style.display = "block";
loadingdone.style.display = "none";
}

}
if(ajaxRequest.readyState == 2){

var imgeffect = document.getElementById('imgeffect');

if (imgeffect.style.visibility == "visible")
{
var loading = document.getElementById('loading');
var loadingdone = document.getElementById('loadingdone');

imgeffect.style.visibility = "hidden";
loading.style.display = "none";
loadingdone.style.display = "block";
}

}
if(ajaxRequest.readyState == 4){

if (ajaxRequest.status == 200)
{
var loading = document.getElementById('loading');
var loadingdone = document.getElementById('loadingdone');
var tunein = document.getElementById('tunein');
var refreshID = "";
//var timeout = "<?=$timeout?>";
var timeout = "30000";
var ajaxResponse = "";

ajaxResponse = ajaxRequest.responseText;
//Change Refresh Timeout Based on Remaining Song Length
loading.style.display = "none";
loadingdone.style.display = "block";
tunein.style.display = "block";
refreshID = setTimeout("DoRefresh()", timeout);

//Finally, Do Refresh
parseRefresh(ajaxResponse);
} else {
ajaxResponse = "Radio Information Error Code: "+ ajaxRequest.status +", Please contact admin@unitedbreaks.fm";

//Do Refresh
parseRefresh();
}
}
}

var forceGET = "?n="+ parseInt(Math.random()*999999999);
ajaxRequest.open("GET", "main_include.php"+forceGET, true);
ajaxRequest.send(null);
}

function parseRefresh(ajaxResponse){
var ajaxDisplay = document.getElementById('ajaxDiv');

ajaxDisplay.innerHTML = ajaxResponse;
}

Then in the handler (main_include.php) , I am simply defining the $timeout variable..

//Set refesh interval
if($timeleft>0)
{ $timeout = $timeleft; } # if timeleft is valid, refresh on timeleft
else
{ $timeout = 60; } # otherwise, fall back on 60 second refresh

$timeleft is a variable defined by MySQL data (remaining track length), This dynamic variable works like this..

If there is 2:00 minutes (120000) milliseconds left on the track.. and someone hits the site (or calls ajax function) , the $timeleft var has exact refresh time.. versus refreshing when not needed (if track hasn't changed)

http://www.unitedbreaks.fm/index_test.php

unitedbreaks:

I wrote: "Try structuring it this way".

That's not the code I posted. First, the readystates change too fast to use them to affect the display.

Second, my AdminResponse variable is GLOBAL. I declared it OUTSIDE of any function. You made it a local variable, are are attempting to pass to your parsing function.

If you are not going test the code I posted AS IS, then I'm finished.

Sorry for the confusion Ancora. I tried your code structure before I modified it and it works, but doesn't pass the php var $timeout.

var AdminResponse = "";
var timeout = ""; // added

function parseSettings(){

refreshID = setTimeout("obtainSettings()", timeout); // added
document.getElementById('ajaxDiv').innerHTML = AdminResponse;

}

function obtainSettings(){

var AdminRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
AdminRequest.onreadystatechange = function()
{
if (AdminRequest.readyState == 4)
{
if (AdminRequest.status == 200)
{
timeout = "<?=$timeout?>"; // added
AdminResponse = AdminRequest.responseText;
parseSettings();
}
else {
alert('Error Admin.php File '+ AdminRequest.statusText);
}
}
}
var forceGET = "?n="+ parseInt(Math.random()*999999999);
AdminRequest.open("GET", "main_include.php"+forceGET, true);
AdminRequest.send(null);
}

its uploaded.. http://www.unitedbreaks.fm/index_test.php

unitedbreaks:

I see. I'd put an alert in the parsing function.


function parseSettings(){

alert(timeout);
refreshID = setTimeout("obtainSettings()", timeout); // added
document.getElementById('ajaxDiv').innerHTML = AdminResponse;

}


Find out exactly what the value is of that variable. The JS looks okay. If timeout, has a value, but is a string, instead of an integer, then try:


refreshID = setTimeout("obtainSettings()", Number(timeout));


forcing it to be an integer.

value is empty :( (via alert window)..

I made sure the value isn't empty via backend php.

http://www.unitedbreaks.fm/index_test.php

Next to the Song Title (blue text under loading).. You should see a number counting down.

Thats $timeout (remaining song length in seconds).

unitedbreaks:

I thought it might be. Why don't you echo it along with the other info in the response, then let the JS split them?


<?php

$timeout = 5000; // this is 5 seconds
$otherInfo = "This will be displayed in the div";

$echo $timeout . "|" . $otherInfo;

?>



function parseSettings(){

var nInfo = AdminResponse.split("|");
refreshID = setTimeout("obtainSettings()", Number(nInfo[0]));
document.getElementById('ajaxDiv').innerHTML = nInfo[1];

}

Thank you very much for your help Ancora! Works perfectly :) :)

unitedbreaks:

You're welcome. Good luck with the remainder of your project.