Hello all, I'm new here 😉 - My name is DJ.
I'm just starting to dip my feet into ajax and would appreciate some help from someone that is fluent with it.
I own/develop/manage an internet radio station "UnitedBreaks.FM", I have song information stored throughout MySQL (Current Song, Coming Up & Just Played).
On the homepage ( http://www.unitedbreaks.fm ) , Currently.. I have php that pulls the current songs remaining track length then javascript to take that variable and refresh the page accordingly. Well, i'm sick of this ineffieciency and would like to refresh what is needed. I tried using an i-frame with some css (for height wise, data varies) , and it just didn't cut it.
So now, i'm into ajax. Here is what has been done so far..
1) http://www.unitedbreaks.fm/index_test.php
<?
//### Calculate the best time to refresh the webpage in order to show new updated song information
//==================================================================================================
list($key, $song) = each($history);
$listeners = $song["listeners"];
$starttime = strtotime($song["date_played"]);
$curtime = time();
$timeleft = $starttime+round($song["duration"]/1000)-$curtime;
//Set refesh interval
if($timeleft>0) # 30 second minimum wait
{ $timeout = $timeleft;} # if timeleft is valid, refresh on timeleft (should be end of song)
else
{ $timeout = 90; } # otherwise, fall back on 90 second refresh
if(($timeout>180) or ($timeout==0)) $timeout = 180;
if($timeout<30) $timeout = 30;
//$refreshURL = "?buster=".date('dhis').rand(1,1000);
//==================================================================================================
?>
<script type="text/javascript" language="JavaScript1.2">
var refreshID = "";
refreshID = setTimeout("DoRefresh()", <? echo ($timeout*1000); ?>);
<!--
//Browser Support Code
function DoRefresh(){
var ajaxRequest; // The variable that makes Ajax possible!
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){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText
}
}
ajaxRequest.open("GET", "main_include.php", true);
ajaxRequest.send(null);
}
//-->
</script>
Then, for the container element..
<div id="ajaxDiv">Blah</div>
2) http://www.unitedbreaks.fm/main_include.php (too much code, couldn't post it)
Two things that are wrong.. I have a function being called.. onload="myfunction()" on index_test.php , It pulls information from main_include.php , but its not updated information. In order for the information to update on index_test , I have to go to main_include.php execute it and refresh index_test.php
Its very odd, and I'm unsure of whats wrong :queasy: . If anyone could lend a helping hand, I'd appreciate it much!!
Thank you,
DJ