Reload a DIV without reloading the whole page?

Question

I have a Wordpress theme that has a sticky audio player at the footer that is streaming a Shoutcast radio station.

I'm calling in the Song Artist/Title details into the sticky bar from another PHP file and it's displaying fine, however it never updates. I need just this text content to reload every 10 seconds without it reloading the entire web page.

Could someone please advise how to do this? Thanking you in advance.

Site Demo: http://gulsonpower.com/the80s/

This is the code of the PHP file in the theme which has the audio player:

(radio-player.php)

<?php 
$radio_ip = get_option('atp_radiostream_id');
$radio_autoplay = get_option('atp_radio_autoplay');
$radio_title = get_option('atp_radio_title');
$radio_desc = get_option('atp_radio_desc');
$atp_playlist_volume = get_option( 'atp_playlist_volume' )  ? get_option( 'atp_playlist_volume' ) : '0.6';
?>
<script type="text/javascript">
jQuery(document).ready(function($){
    var stream = {
        mp3: "<?php echo $radio_ip; ?>"
    },

    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;

            }
        },
        swfPath: "<?php echo get_template_directory_uri(); ?>/js",
        volume: <?php echo $atp_playlist_volume; ?>,
        supplied: "m4a, oga, mp3",
        preload: "none",
        wmode: "window",
        keyEnabled: true

    });

    //    songs played in single page  every thing

        var my_jPlayer = jQuery("#jquery_jplayer_1");

        jQuery(".fap-single-track").click(function(e) {
                my_jPlayer.jPlayer("setMedia", {
                    mp3: jQuery(this).attr("href"),
                    title: jQuery(this).attr("title"),

                });
                var first_track = true;
                my_jPlayer.jPlayer("play");
                first_track = false;
                $(this).blur();
                return false;
        });

});
</script>
<div id="jp_container_1" class="jp-audio jp-radio">

    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
        <div class="jp-inner">
        <div class="jp-close-btn">+</div>
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <strong class="jp-title"><?php echo $radio_title ?></strong>
                <span class="jp-title" style="display:block;"><?php include 'now-playing.php' ?></span>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>

            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
        </div>
        </div>

    </div>
</div>

It's calling in (now-playing.php)

<?php
/*

Now Playing PHP script for SHOUTcast

This script is (C) MixStream.net 2008

Feel free to modify this free script 
in any other way to suit your needs.

Version: v1.1

*/


/* ----------- Server configuration ---------- */

$ip = "streaming.the80s.com.au";
$port = "80";

/* ----- No need to edit below this line ----- */
/* ------------------------------------------- */
$fp = @fsockopen($ip,$port,$errno,$errstr,1);
if (!$fp) 
    { 
    echo "Connection refused"; // Diaplays when sever is offline
    } 
    else
    { 
    fputs($fp, "GET /7.html HTTP/1.0\r\nUser-Agent: Mozilla\r\n\r\n");
    while (!feof($fp)) 
        {
        $info = fgets($fp);
        }
    $info = str_replace('</body></html>', "", $info);
    $split = explode(',', $info);
    if (empty($split[6]) )
        {
        echo "The current song is not available"; // Diaplays when sever is online but no song title
        }
    else
        {
        $title = str_replace('\'', '`', $split[6]);
        $title = str_replace(',', ' ', $title);
        echo "$title"; // Diaplays song
        }
    }
?>

Answer 1

You can use the load function in jquery

<?php 
$radio_ip = get_option('atp_radiostream_id');
$radio_autoplay = get_option('atp_radio_autoplay');
$radio_title = get_option('atp_radio_title');
$radio_desc = get_option('atp_radio_desc');
$atp_playlist_volume = get_option( 'atp_playlist_volume' )  ? get_option( 'atp_playlist_volume' ) : '0.6';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function loadlink(){
    $('.jp-progress span.jp-title').load('now-playing.php',function () {
         $(this).unwrap();
    });
}
jQuery(document).ready(function($){
    loadlink(); // This will run on page load
    setInterval(function(){
        loadlink() // this will run after every 5 seconds
    }, 5000);
    var stream = {
        mp3: "<?php echo $radio_ip; ?>"
    },

    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream)<?php if($radio_autoplay =='on'){ ?>.jPlayer("play")<?php } ?>;

            }
        },
        swfPath: "<?php echo get_template_directory_uri(); ?>/js",
        volume: <?php echo $atp_playlist_volume; ?>,
        supplied: "m4a, oga, mp3",
        preload: "none",
        wmode: "window",
        keyEnabled: true

    });

    //    songs played in single page  every thing

        var my_jPlayer = jQuery("#jquery_jplayer_1");

        jQuery(".fap-single-track").click(function(e) {
                my_jPlayer.jPlayer("setMedia", {
                    mp3: jQuery(this).attr("href"),
                    title: jQuery(this).attr("title"),

                });
                var first_track = true;
                my_jPlayer.jPlayer("play");
                first_track = false;
                $(this).blur();
                return false;
        });

});
</script>
<div id="jp_container_1" class="jp-audio jp-radio">

    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
        <div class="jp-inner">
        <div class="jp-close-btn">+</div>
            <ul class="jp-controls">
                <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-progress">
                <strong class="jp-title"><?php echo $radio_title ?></strong>
                <span class="jp-title" style="display:block;"><?php include 'now-playing.php' ?></span>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time"></div>

            </div>
            <div class="jp-volume-bar">
                <div class="jp-volume-bar-value"></div>
            </div>
        </div>
        </div>

    </div>
</div>

Answer 2

Because you are already using Jquery jQuery(document).ready that is in your code Take a look at Jquery Ajax function: http://api.jquery.com/jquery.ajax/

To load it every 10 seconds use JS intervals http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 3

There are several frameworks that do the ajax trick for you such as jquery in jquery, you can, for example, do this

$( "#result" ).load( "my-php-page-that-returns-what-i-want.php" );

In any case i would take a look into this tree Jquery methods to start your learning journey across the asynchronous life.

$.get
$.post
$.load

Answer 4

If you use ajax this could be an example:

         $(document).ready(function() {
             $("#player").html('').load("what-isplaying.php");
               var refreshId = setInterval(function() {
                $("#player").html('').load("what-isplaying.php");
           }, 4000);
           $.ajaxSetup({ cache: false });
        });

Where #player the DIV is that should containt the name of the song, and what-is-playing.php should only contain an echo with the name of the song, which wil refresh every 4 seconds.

Just an example, go ahead and improve it yourself.