Auto refresh div content, loaded by jquery include ajax call

Question

I am loading output from now_playing.php (shoutcast now playing content) using a jQuery include ajax call, as sugested here, and it works well.

My code:

<script>
$(function(){
    $("#now_playing").load("now_playing.php");
});
</script>

<div id="now_playing"></div>

I just need that div output content updated every 5 seconds or so. Which code can i add to script or div part for that? Thank you!

Answer 1

You can do this: Put your load() in a function, then use a setInterval to call it every 5 seconds.

function loadNowPlaying(){
  $("#now_playing").load("now_playing.php");
}
setInterval(function(){loadNowPlaying()}, 5000);

Answer 2

You can use setInterval for that. Like

setInterval(function(){
    $("#now_playing").load("now_playing.php");
    ...
}, 5000);

It'll execute the load the now_playing.php and do the other stuff you want every 5 seconds (5000 milliseconds)

Answer 3

try to do it with setInterval():

$(function(){
   setInterval(function(){$("#now_playing").load("now_playing.php")},5000);
}

Answer 4

Learned Magicprog.fr, augustoccesar and Edan Feiles's suggestions, and decided Magicprog.fr's solution is best, because it first loads now_playing.php output, then just updates it at given interval:

<script>
function loadNowPlaying(){
  $("#now_playing").load("now_playing.php");
}
setInterval(function(){loadNowPlaying()}, 5000);
</script>

Thank you very much for help :)