2016-10-25 3 views
0

동일한 페이지에서 여러 div의 내용을 새로 고치거나 업데이트하려고합니다. 하나의 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> 

이것은 DB의 데이터가 div를 업데이트 할 때 단일 div에 유용합니다. 업데이트하지만 여러 div를 업데이트하는 데 사용할 수 없습니다. 각 파일에 대해 다른 파일에 여러 호출을 추가하고 ID를 변경하려고 시도했지만 마지막 div 만 업데이트합니다. 동일한 페이지의 여러 div에있는 데이터를 데이터베이스의 데이터로 업데이트/새로 고치는 간단한 방법이 있습니까? 이 방법은 모든 HTML을 data.php에로드하면 작동하지만 div의 패널 본문에 비디오 플레이어가 포함되어 비디오 플레이어가 새로 고쳐지기 때문에 문제가 발생합니다. 플레이어가 div를 새로 고치고 업데이트 할 때마다

고마워요은

+0

이 window.location.reload 시도해 주시겠습니까 –

+0

모든 div가 동일한 ID가 있습니까? # chaser1? – natel

+0

@natel 아니, 그건 하나의 ID가 하나의 div에 대해서만 사용될 수 있다는 것이다. update.js 파일에 두 번째 ID를 추가하고 두 번째 data1.php를 가리 키도록 시도했지만 첫 번째 ID는 업데이트되지 않습니다. – Texan78

답변

0

내가 필요하고대로 작동, 예쁜 또는 가장 논리적 인 해결책이 될 수 있지만하지 않을 수 있습니다.

내 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); 
} 

다음 각 사업부의 페이지에 ID가이 찾고 그것을 호출되는 페이지의 모든 태그와 PHP가 포함 된 데이터에 대응 있도록 같은 ID를 포함.

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

가장 논리적은 아니지만 지금은 작동하는 것으로 보입니다.