同じページの複数のdivの内容を更新する

Question

複数のdivの内容を同じページで更新/更新しようとしています。私は1つの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> 

これは、DB内のデータが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は、それが探して、それが呼んでいる、そのページ上のすべてのマークアップとPHPを含まれているデータに対応するように、などのIDが含まれています。

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

これは最も論理的ではないかもしれませんが、現在は動作しているようです。