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。

-Thanks

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>

它可能不是最符合逻辑的，但它现在似乎在起作用。

刷新同一页面上多个div的内容

1 个答案: