...

View Full Version : Javascript Table Cell AutoRefreshing (Ajax?)



Golden_Eagle
09-09-2007, 05:34 AM
I have installed Invision Board on my site, with a radio server that has details of the song currently being played by the DJ. However, the song title doesnt refresh unless you reload the page.

Is there a way to refresh the contents of the cell, say every 10 seconds without reloading the whole page? If so, how can this be done? I imagine either Javascript or I have had the mention of Ajax before.

As said, dont no an aweful lot about Javascript programing, but help would be more than appreciated.

Basicly, I just need a TD Cell to refresh it's contents every 10 seconds. Is it possible?

rwedge
09-09-2007, 09:44 PM
As long as the radio server file is available locally you could use AJAX.

example:
<script type="text/javascript">
/*<![CDATA[*/
var xmlHttp, timer, url = 'radioserver.txt';
function ajaxRequest() {
if (timer) {
clearTimeout(timer);
}
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
try {
xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.3.0');
} catch(er) {
// alert("Could Not Initiate HTTPRequest!");
return;
}
}
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
handleRequest(xmlHttp);
} else {
handleError(xmlHttp);
}
}
};
xmlHttp.open("GET", url + '?' + Math.random(), true);
xmlHttp.send(null);
}
function handleRequest(txt) {
if (txt.responseText) {
var target_ele = document.getElementById('song_info');
var newTxt = document.createTextNode(txt.responseText);
var ochild = target_ele.childNodes[0];
ochild.parentNode.replaceChild(newTxt, ochild);
}
timer = setTimeout(ajaxRequest, 10000); // 10 seconds
}
function handleError(err) {
// alert('A ' + err.status + ' Error Occurred.\nError Message: ' + err.statusText);
return;
}
window.onload = function() {
ajaxRequest();
};
/*]]>*/
</script>

...

<table>
<tbody>
<tr>
<td>first cell contents</td><td id="song_info">default value</td><td>third cell contents</td>
</tr>
</tbody>
</table>

Golden_Eagle
09-11-2007, 12:28 AM
Obviously, being invision board, it's completely built by PHP. I've added the Javascript into the 'Global Header' of the site. Trolled through to where PHP sends the Song info to the webpage and add the song_info tag to the TD tag.

What I'm not sure about is the radioserver.txt file mentioned in the script. Does Ajax need to read from a physical file in order to refresh the details?

I'm not recieving any errors, but on the other hand, the cell is not refreshing either. Have I missed something?

rwedge
09-11-2007, 12:52 AM
Does Ajax need to read from a physical file in order to refresh the details?

It could be a PHP page that fetchs the song data and hands it off to the AJAX request or a simple txt file which is updated by a server side script.

How are you getting the radio server data?

If you set up a PHP file to fetch the song data you can pass the data directly to the request. If that is the case the url in the AJAX script would point to the PHP file.

Edit: Uncomment the alert for the error handling to see if an error is returned
alert('A ' + err.status + ' Error Occurred.\nError Message: ' + err.statusText);

Golden_Eagle
09-12-2007, 01:43 AM
That sounds all too confusing and I have clearly have no understanding of that post (sorry complete n00b).

I think an easier option perhaps if it will work is something like this?

I am hoping to put the PHP fetch into a div and refresh it every 5 seconds.

It's got to be like this -

<div id='refresher'><!--IBF.RADIOPANEL--></div>
The radio panel update's song title, DJ playing, and loads of other thing.

Basically, how can I get the 'refresher' ID to update every 5 seconds?

I've tried a few scripts, but I think, because it's a PHP fetch it does want to work.

Any ideas?

rwedge
09-12-2007, 03:31 AM
How are you getting the radio data? What does the data look like, is it static html with a link to a stream printed by the PHP when the page is rendered? Can you request updates from the radio server?

Golden_Eagle
09-12-2007, 10:24 AM
When the information from the <!--IBF.RADIOPANEL--> code is called (when the page loads) it builds the information on the site in HTML (song title, current DJ, Genre etc). The only link is to a stream to listen to it. (WinAmp .pls). The information is automatically updated on the server through ShoutCAST as soon as the track changes, but the information onsite doesnt change unless you refresh the page.

Only other problem, is, unless the radio is online, you cannot see the information. It just states the radio is offline.

The code for the radio was made by h**p://www.bouncyservers.co.uk/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum