8

I'm working on a music site: I have a text file on the server which contains the name of the currently playing song. I would like read the text file every fifteeen seconds, and change the text displayed on my site, without a refresh.

Now, using a little jQuery and javascript, I have actually gotten to the point where the file is read and displayed the first time, but it wont refresh . I have attempted all sorts of setInterval functions, but for the life of me I cant get this part to work. Any help would be greatly appreciated.

Here is what I have:

<script type="text/javascript"> 
$(document).ready(function() {
    jQuery.get('http://www.XXXXX.com/nowplaying/NowPlaying.txt', function(data) {
        var myvar = data;
        var parts = myvar.split(/\n/);
        var songtitle = parts[0];
        var songartist = parts[1];
        var songalbum = parts[2];
        var songtime = parts[3];
        $('#songtitleholder').html(songtitle);
        $('#songartistholder').html(songartist);
        $('#songalbumholder').html(songalbum);
    });
});​
</script>
j08691
  • 204,283
  • 31
  • 260
  • 272
Richard Taylor
  • 83
  • 1
  • 1
  • 6
  • On a side note, you should consider saving information like this in a database instead of a text file – Horen Dec 22 '12 at 16:05

6 Answers6

6

You can put the code you want to execute repeatedly in function and pass that function in setTimeout. The second parameter of setTimeout will take interval in millisecond.

Using setTimeout here IMO is more appropriate here as It will exclude the time taken for send request and receiving response. It will send request every 5 second after receiving response.

<script type="text/javascript"> 

 $(document).ready(function() {

    function functionToLoadFile(){
      jQuery.get('http://www.XXXXX.com/nowplaying/NowPlaying.txt', function(data) {
       var myvar = data;
       var parts = myvar.split(/\n/);
       var songtitle = parts[0];
       var songartist = parts[1];
       var songalbum = parts[2];
       var songtime = parts[3];

       $('#songtitleholder').html(songtitle);
       $('#songartistholder').html(songartist);
       $('#songalbumholder').html(songalbum);
       setTimeout(functionToLoadFile, 5000);
    });
    }

    setTimeout(functionToLoadFile, 10);
});

</script>
Adil
  • 146,340
  • 25
  • 209
  • 204
  • This works beautifully! thank you. Is there a way to read the target text file as soon as one would land on the page, display it, THEN refresh? As it stands now, the song title label sits blank for a few seconds (which I can TOTALLY live with). Thank you for your quick response! – Richard Taylor Dec 22 '12 at 16:11
  • I have updated my answer, it will load as soon as the page is loaded and reload after 5 seconds. Using setTimeout here IMO is more appropriate here as It will exclude the time take for send request and receiving response. It will send request every 5 second after receiving response. – Adil Dec 22 '12 at 16:16
  • this worked perfectly for me. Thank you. This place is awesome! I thought I was gunna be stuck until after the holidays! – Richard Taylor Dec 22 '12 at 16:37
3

You should be able to wrap your example in a setInterval call like this:

$(document).ready(function() {
    setInterval( function(){
    jQuery.get('http://www.XXXXX.com/nowplaying/NowPlaying.txt', function(data) {
        var myvar = data;
        var parts = myvar.split(/\n/);
        var songtitle = parts[0];
        var songartist = parts[1];
        var songalbum = parts[2];
        var songtime = parts[3];
        $('#songtitleholder').html(songtitle);
        $('#songartistholder').html(songartist);
        $('#songalbumholder').html(songalbum);
    });
    }, 15000);
});​
j08691
  • 204,283
  • 31
  • 260
  • 272
3

Create a function and call it with setInterval (you might want to add a timestamp to the URL so that the result does not cache)

$(document).ready(function() {
    function refresh(){
        jQuery.get('http://www.XXXXX.com/nowplaying/NowPlaying.txt', { "t": $.now() }, function(data) {
            var myvar = data,
                parts = myvar.split(/\n/),
                songtitle = parts[0],
                songartist = parts[1],
                songalbum = parts[2],
                songtime = parts[3];

            $('#songtitleholder').html(songtitle);
            $('#songartistholder').html(songartist);
            $('#songalbumholder').html(songalbum);
        });
    }
    setInterval(refresh, 15000);
});​
Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
1

Why not try this?

    window.setInterval(function(){

    /// call your function here

    }, 15000);
Jesus Zamora
  • 810
  • 2
  • 7
  • 24
1

Solution using setTimeout. setInterval tends to get queued when window loses focus while switching browser tabs.

$(document).ready(function() {
    getData();
});​

function getData() {
    setTimeout(function() {
        jQuery.get('http://www.XXXXX.com/nowplaying/NowPlaying.txt', function(data) {
            var myvar = data;
            var parts = myvar.split(/\n/);
            var songtitle = parts[0];
            var songartist = parts[1];
            var songalbum = parts[2];
            var songtime = parts[3];
            $('#songtitleholder').html(songtitle);
            $('#songartistholder').html(songartist);
            $('#songalbumholder').html(songalbum);

            /* repeat getData*/
            getData();
        });
    }, 15000)

}
charlietfl
  • 170,828
  • 13
  • 121
  • 150
0

In addition to using setInterval as per everyone else's answers, make sure the file isn't being cached by requesting:

jQuery.get("http://......./NowPlaying.txt?t="+new Date().getTime(), function....);
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592