나는 순진하지만 게이지가 들어있는 div에 데이터를 가져 오는 데 현재 직면하고 있습니다. 데이터베이스의 값이 업데이트됨에 따라 게이지의 값을 동적으로 변경하고 싶습니다. Google에서 검색 한 대부분의 답변을 알고 있으며 다른 일부는 주로 아약스와 관련이 있습니다. 이전에 아약스를 사용했지만 양식을 사용하여 아약스를 활성화하고 데이터가 양식을 통과하고있었습니다.하지만 최근의 상황에서는 데이터가 하드웨어에서 제공되지 않습니다. 이제 전체 페이지를로드하지 않고 해당 데이터를 게이지에 동적으로로드해야합니다 //양식없이 div에서 페이지를 다시로드하지 않고 데이터베이스에서 얻는 방법은 무엇입니까?
다음은 내가 새로 고치려는 div 코드입니다.
<div class="col-md-3" id="guage-bar">
<section class="panel" >
<header class="panel-heading">
<?php echo $row['name']; ?><span class="tools pull-right">
<a href="detail_report.php?name=<?php echo htmlentities($row['name']);?>&selected=3" class="fa fa-bar-chart-o"></a>
</header>
<div class="panel-body" style="height : 245px;" >
<div class="top-stats-panel">
<div class="gauge-canvas text-center">
<div class="js-gauge <?php echo $row['pulse_id']; ?> gauge"></div>
<span class="unit"><?php echo $row['unit_ph']; ?></span>
</div>
<ul class="gauge-meta clearfix">
<li id="gauge-textfield" class="pull-left gauge-value"></li>
</ul>
</div>
</div>
</section>
</div>
나는 코드가 어떤 아약스가 .. 그러나 나는 아약스에 대한이 이전 코드입니다 ...
$(function save() {
$('#hour_form').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'get',
url: 'hourly_detail.php',
data: $('#hour_form').serialize(),
});
});
});
여기
나는이 시간 양식에서하지만 내 현재 상태에서 데이터를 얻고 있었다 데이터가 계기로 가져 오는 곳의 get_pulse_data.php. 내가 사용하는 한 계기는 ...
<?php
include "connection.php";
include "session_data.php";
$sql = "SELECT * FROM data_current where device_key = '" . $session_row["device_key"] . "' ";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$pulse_data1 = $row['pulse1'];
}
}
$min_max = "SELECT * FROM pulse_setting where pulse_id='pulse1' and device_key = '" . $session_row["device_key"] . "' ";
$value = $conn->query($min_max);
// output data of each row
while($val= $value->fetch_assoc()) {
$min = $val['min_pulse'];
$max = $val['max_pulse'];
$unit = $val['unit_ph'];
?>
<script>
$('.pulse1').kumaGauge({
value : <?php echo $pulse_data1 ?>,
radius : 100,
// The padding on the top and bottom of the gauge
paddingX : 40,
// The padding on the left and right of the gauge
paddingY : 40,
// The width of the gauge itseld
gaugeWidth : 50,
// The fill of the gauge, this can be a solid color or a gradient
fill : '0-#5B90F6:25-#2E37FE:55-#0000EE:85-#000080:100',
// The fill of the gauge background, this can be a solid color or a gradient
gaugeBackground : '#EDEDED',
// The fill of the canvas, this can be a solid color or a gradient
background : '#000',
// Show or hide the needle,
// if true the value label shows half of the range
// if false the value label shows the value
showNeedle : false,
// The speed of the animation in miliseconds
animationSpeed : 500,
// The minimum value of the gauge
min : <?php echo $min ?>,
// The maximum value of the gauge
max : <?php echo $max ?>,
// The label that indicates the value
valueLabel : {
// show or hide this label
display : true,
// The font family of this label
fontFamily : 'Arial',
// The font color of this label
fontColor : '#ddd',
// Integer of The font size of this label (without px)
fontSize : 20,
// The font weight of this label
fontWeight : 'bold'
},
title : {
// show or hide this label
display : false,
// String the value of the title
value : 'pulseerature 1',
// The font family of this label
fontFamily : 'Arial',
// The font color of this label
fontColor : '#ddd',
// Integer of The font size of this label (without px)
fontSize : 20,
// The font weight of this label
fontWeight : 'bold'
},
label : {
// show or hide this label
display : true,
// The value of the left (minimum) label
left : <?php echo $min ?>,
// The value of the right (maximum) label
right : <?php echo $max ?>,
// The font family of this label
fontFamily : 'Arial',
// The font color of this label
fontColor : '#ccc',
// Integer of The font size of this label (without px)
fontSize : 10,
// The font weight of this label
fontWeight : 'normal'
}
});
?>
걱정 해 주셔서 감사합니다
setinterval() 함수를 사용해 보셨습니까? –
나는 그것을 사용하는 아이디어가 없다 .Plz는 – metalhead101
당신이 필요로하는 것이 확실하지는 않지만, Ajax를 사용하여 [element/div/class의 값]을 얻을 수있다. (http://api.jquery.com/text /)를 폼에 넣지 말고'setInterval'과 결합합니다. ([THIS] (http://stackoverflow.com/questions/17529783/how-do-you-set-interval-to-ajax-call -in-jquery)) 자동 새로 고침을 얻을 수 있습니다. – OldPadawan