Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Table Cell AutoRefreshing (Ajax?)

    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?

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    As long as the radio server file is available locally you could use AJAX.

    example:
    Code:
    <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>
    Last edited by rwedge; 09-10-2007 at 12:58 AM. Reason: occurred spelling

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    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
    Code:
    alert('A ' + err.status + ' Error Occurred.\nError Message: ' + err.statusText);
    Last edited by rwedge; 09-11-2007 at 05:13 AM. Reason: alerts

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 -
    Code:
    <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?

  • #6
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    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?

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    100
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •