Перезагрузите DIV без перезагрузки всей страницы?

Question

У меня есть тема Wordpress, в которой есть липкий аудиоплеер на нижнем колонтитуле, который транслирует радиостанцию ​​Shoutcast.

Я звоню в записи исполнителя песни/заголовка в липкую панель из другого файла PHP, и он отображается хорошо, однако он никогда не обновляется. Мне нужен только этот текстовый контент для перезагрузки каждые 10 секунд без перезагрузки всей веб-страницы.

Не могли бы вы посоветовать, как это сделать? Заранее благодарю.

сайта Демо: http://gulsonpower.com/the80s/

Это код файла PHP в теме, которая имеет аудиоплеер:

(радио 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> 

Он звонит в (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

Если вы используете ajax, это может быть примером:

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

Где #player DIV является то, что должно containt название песни, а что-это-playing.php должен только содержат эхо с названием песни, которая Виль обновляется каждые 4 секунды ,

Просто пример, сделайте это самостоятельно.

Answer 2

Есть несколько структур, которые делают ajax трюк для вас, таких как jquery в JQuery, вы можете, например, сделать это

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

В любом случае я бы взглянуть в это дерево методы Jquery чтобы начать учебное путешествие по асинхронной жизни.

$.get 
$.post 
$.load 

Answer 3

Поскольку вы уже используете Jquery jQuery(document).ready, который находится в вашем коде Посмотрите на функции Jquery Ajax: http://api.jquery.com/jquery.ajax/

Чтобы загрузить его через каждые 10 секунд используют интервалы JS http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 4

Вы может использовать функцию load в 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>