自动刷新div不起作用
[英]auto refresh a div not working
问题描述
I'm trying to develop a div that is automatically updated with your own content as it will be to show a real ping a website on canvas. 
我正在尝试开发一个div，该div会自动使用您自己的内容进行更新，因为它将在画布上显示真正的ping网站。
I have the following script: 我有以下脚本：
<script>
var auto_refresh = setInterval(
function()
{
$('#divcanvas').fadeOut('slow').load('teste.php #divcanvas').fadeIn("slow");
}, 1000);
</script>
In my markup have: 在我的标记中有：
<div style="width:30%">
<div id="divcanvas">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
And in test.php have: 并且在test.php中有：
<?php
include_once "ping/pingdomain.php";
require_once "ping/config.php";
$ms = pingDomain('www.adhenrique.com.br');
$hora = date("H:i:s", time());
mysql_query("insert into ping (resposta, horario) values ('$ms', '$hora')");
$sql = mysql_query("SELECT * FROM PING order by id DESC LIMIT 0,15");
?>
<head>
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="includes/js/chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" height="450" width="600"></canvas>
<?php
$pingreposta = array();
$pinghorario = array();
while($valor = mysql_fetch_assoc($sql))
{
extract($valor);
$pinghorario[] = $valor['horario'];
$pingreposta[] = $valor['resposta'];
}
?>
<script>
var lineChartData = {
labels :<?php echo '[' .'"'. implode('","', $pinghorario) .'"'. ']'; ?>
,
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : <?php echo '[' . implode(',', $pingreposta) . ']'; ?>
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
</script>
</body>
</html>
But when i open the index.php, it does not show the canvas. 但是当我打开index.php时，它不显示画布。 But if i open the test.php data it shows. 但是，如果我打开显示的test.php数据。 That is, the code of canvas is correct. 也就是说，canvas的代码是正确的。
Where is my mistake? 我的错误在哪里？
2 个解决方案
解决方案1
1 2015-04-05 19:44:31
At this line, you did a typo: 在这一行，您输入了错误：
$('#divcanvas').fadeOut('slow').load('teste.php #divcanvas').fadeIn("slow");
teste.php should be test.php I guess. 我猜teste.php应该是test.php 。
解决方案2
0 2015-04-05 19:48:17
When you call load('teste.php #divcanvas') in that way you're requesting only #divcanvas from teste.php (which not exists) according to jQuery.load() 当您以这种方式调用load('teste.php #divcanvas')时，根据jQuery.load（）仅从teste.php（不存在）请求#divcanvas。
$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container.
I would prefer this kind of approach using ajax 我更喜欢使用ajax的这种方法
main.html main.html中
<!doctype html>
<body>
<head>
<title>Documento sem título</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.js"></script>
<script src="chart.js"></script>
</head>
<script>
$(document).ready(function(){
$('#divcanvas').fadeOut('slow');
// Set "active" to true to animate addData()
var chartAnimation = {"active":false,"time":250,"currentTime":0,"currentIndex":0};
var data = new Array();
var label = new Array();
var lineChartData = {
labels: [],
datasets : [{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data: []
}]
};
var canvas = document.getElementById("canvas");
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
$.get("test.php", function(res) {
res = jQuery.parseJSON(res);
$('#divcanvas').fadeIn("slow")
for (var key in res) {
var arr = new Array(res[key])
data.push(arr);
label.push(key);
if (chartAnimation.active) {
chartAnimation.currentTime += chartAnimation.time;
setTimeout(function(){myLine.addData(data[chartAnimation.currentIndex],label[chartAnimation.currentIndex]); chartAnimation.currentIndex++;},chartAnimation.currentTime);
} else {
myLine.addData(arr,key);
}
}
});
});
</script>
<div style="width:30%">
<div id="divcanvas">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
</div>
</body>
test.php test.php的
<?php
include_once "ping/pingdomain.php";
require_once "ping/config.php";
$ms = pingDomain('www.adhenrique.com.br');
$hora = date("H:i:s", time());
mysql_query("INSERT INTO ping (resposta, horario) VALUES (".$ms.", ".$hora.")");
$sql = mysql_query("SELECT * FROM PING order by id DESC LIMIT 0,15");
$resp = array();
while ($valor = mysql_fetch_assoc($sql)) {
$resp[$valor['horario']] = $valor['resposta'];
}
echo json_encode($resp);
?>
Chart animation added just for fun :) 添加图表动画只是为了好玩:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.