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('.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>

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>

• javascript
• jquery
• setinterval
• partial-page-refresh

• On a side note, you should consider saving information like this in a database instead of a text file – Horen Commented Dec 22, 2012 at 16:05

6 Answers 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>

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);
});​

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);
});​

Why not try this?

    window.setInterval(function(){

    /// call your function here

    }, 15000);

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)

}

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....);