刷新同一頁面上多個div的內容

Question

我正在嘗試刷新/更新同一頁面上多個div的內容。 我有一直在使用的代碼，該代碼非常適合單個div，但我需要能夠刷新/更新多個div的內容。 數據來自數據庫。 這是一個如何工作的示例。

data.php

    <?php

include('dbconn.php');

$sql = "SELECT gpsStatus FROM streamdb";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $i = 1;
    while($row = $result->fetch_assoc()) {
    $gpsStatus[$i] = $row["gpsStatus"];

   $i++;

    }
}

$sql = "SELECT DisplayName FROM streamdb";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $i = 1;
    while($row = $result->fetch_assoc()) {
    $DisplayName[$i] = $row["DisplayName"];

   $i++;

    }
}

$sql = "SELECT ChaserLocation FROM streamdb";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $i = 1;
    while($row = $result->fetch_assoc()) {
    $chaserLocation[$i] = $row["ChaserLocation"];

   $i++;

    }
} 

$sql = "SELECT StreamStatus FROM streamdb";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $i = 1;
    while($row = $result->fetch_assoc()) {
    $status[$i] = $row["StreamStatus"];

    $i++;

    }
} 

$sql = "SELECT TimeStamp FROM streamdb";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    $i = 1;
    while($row = $result->fetch_assoc()) {
    $timeStamp[$i] = $row["TimeStamp"];

    $i++;

    }
} 

$conn->close();

<div class="left"><h3 class="panel-title"><?php if ($gpsStatus[1] == 'true' ) { echo "<i class='small material-icons' style='color:#00FF00; font-size:12px;' title='GPS Location Active'>gps_fixed</i>"; } else { echo "<i class='small material-icons' style='color:#FF0000; font-size:12px;' title='GPS Location Offline'>gps_fixed</i>"; } echo " $DisplayName[1]"; if ($gpsStatus[1] == 'true' ) echo " - $chaserLocation[1]"; ?></h3></div> <div class="right"><h3 class="panel-title"><?php if ($status[1] == 'true' ) { echo "<span class='label label-success' style='vertical-align:-40px;'><i class='fa fa-video-camera'></i> LIVE</span>"; } else { echo "<span class='label label-important'><i class='material-icons' style='vertical-align:-4px; font-size:14px;'>videocam_off</i> OFFLINE</span>"; } ?></h3></div><div style="clear:both;"></div>

然后我有一個名為update.js的js文件，看起來像這樣，調用了上面的文件...

$(document).ready( function(){
$('#chaser1').load('inc/data.php');
refresh();
});

function refresh()
{
    setTimeout( function() {
      $('#chaser1').load('inc/data.php');
      refresh();
    }, 2000);
}

然后在我的HTML頁面上調用，這樣可以刷新div ...

<div class="col-md-3"> <div class="panel panel-primary">
                  <div class="panel-heading">
                  <div id="chaser1"></div>
                  </div>

當數據庫中的數據更新div更新時，這對於單個div很有用，但是，我無法使用它來更新多個div。 我嘗試為每個文件將多個調用添加到不同的文件並更改ID，但是它只會更新最后一個div。 有沒有一種簡化的方法可以使用數據庫中的數據更新/刷新同一頁面上多個div中的數據。 如果我將所有HTML都加載到data.php中，這將起作用，但是隨后出現的問題是div的面板主體包含視頻播放器，因此它也刷新了我不想要的視頻播放器，因為這將停止播放器每次刷新並更新div。

-謝謝

Answer 1

它可能不是最漂亮或最合乎邏輯的解決方案，但它可以按我的需要運行。

對於我的update.js，我只是像這樣添加了每個ID，然后將每個新ID指向了自己的頁面。

$(document).ready( function(){
$('#chaser1').load('inc/chasers/ncopeland.php');
$('#chaser2').load('inc/chasers/ksaunders.php');
$('#chaser3').load('inc/chasers/rcontreras.php');
$('#chaser4').load('inc/chasers/nbusby.php');
$('#chaser5').load('inc/chasers/gyates.php');
$('#chaser6').load('inc/chasers/jcollum.php');
refresh();
});

function refresh()
{
    setTimeout( function() {
      $('#chaser1').load('inc/chasers/ncopeland.php');
      $('#chaser2').load('inc/chasers/ksaunders.php');
      $('#chaser3').load('inc/chasers/rcontreras.php');
      $('#chaser4').load('inc/chasers/nbusby.php');
      $('#chaser5').load('inc/chasers/gyates.php');
      $('#chaser6').load('inc/chasers/jcollum.php');
      refresh();
    }, 2000);
}

然后，在每個div的頁面上都包含ID，就像這樣，其ID對應於它要查找的數據，並在它正在調用的頁面上包含所有標記和php。

<div id="chaser1" class="panel-heading">
                  </div>

它可能不是最合邏輯的，但現在似乎正在運行。