尝试刷新页面上的一个DIV的内容，而不改变DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

     <title>ajax div example</title> 
<script type="text/javascript" src="jscripts/jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
    var dbn,machine_name; 
function main_draw(d,m,r) 
{ 
    dbn = d; 
    machine_name = m; 
    draw_charts(); 
    if (r > 0) 
     { 
      setRefreshid = setInterval("draw_pie()",r); 
     } 
} 
function draw_charts() 
{ 

document.getElementById('ajdiv4').innerHTML = ""; 
document.getElementById('ajdiv3').innerHTML = ""; 
document.getElementById('ajdiv2').innerHTML = ""; 
document.getElementById('ajdiv1').innerHTML = ""; 
draw_pie(); 
draw_line(); 
draw_space(); 
draw_backup(); 

} 

function draw_pie() 
{ 
setTimeout(function() { 
    $.ajax({ 

     url: 'JSCharts/graph_pie1.html', 
     success: function(html) 
     { 
      $("#ajdiv4").html(html); 
     } 
    }); }, 100); 
} 

function draw_line() 
{ 
setTimeout(function() { 
    $.ajax({ 

     url: 'JSCharts/graph_line1.html', 
     success: function(html) 
     { 
      $("#ajdiv3").html(html); 
     } 
    }); }, 200); 
} 

function draw_space() 
{ 
    setTimeout(function() { 
    $.ajax({ 

     url: 'JSCharts/space_graph.php', 
     success: function(html) 
     { 
      $("#ajdiv2").html(html); 
     } 
    }); }, 300); 
} 

function draw_backup() 
{ 
    setTimeout(function() { 
    $.ajax({ 

     url: 'JSCharts/backup_graph.php', 
     success: function(html) 
     { 
      $("#ajdiv1").html(html); 
     } 
    }); }, 400); 
} 

</script> 
</head> 
<body> 

<div id="ajdiv1" style="float:left"></div> 
<div id="ajdiv2" style="float:left"></div> 
<div id="ajdiv3" style="float:left"></div> 
<div id="ajdiv4" style="float:left"></div> 

<button id="b1" onclick="main_draw('CQ1','va2apsap010',10000)">Display Content</button> 
</body> 
</html>

上面的位置是一个完整的代码，这使得AJAX呼吁点击“显示内容”之后，它通过调用刷新格“ajdiv4”的内容函数“draw_pie”。唯一的问题是，当它刷新时，会将饼图一直移动到左侧。我希望它保持并更新当前位置。如果有人知道这里发生了什么，请帮助，谢谢。尝试刷新页面上的一个DIV的内容，而不改变DIV

来源

2012-06-09 Vinayak dave

您是否试过指定DIV的尺寸？根据您目前的代码，你很可能这样做：

<style> 
#ajdiv1, #ajdiv2, #ajdiv3, #ajdiv4 { 
    height:200px; 
    width:200px; 
} 
</style>

另外，添加一个class属性把事情简单化：

<style> 
.chartContainer { 
    height:200px; 
    width:200px; 
} 
</style>

如果你有一个工作版本升级，或者可以张贴在的jsfiddle的东西，这会使事情更容易排除故障。

来源

2012-06-09 20:31:08 technoTarek

感谢Anders的快速回复。我是这个网站的新手，所以我不确定是否可以在这里发送附件，这可能会更有帮助。基本上，发生的情况是它第一次显示从左到右的四个图形（左浮动）。 10秒后，它尝试通过ajax调用“draw_pie（）”函数来刷新div“ajdiv4”，但这次它从屏幕中最右侧的位置移动到最左侧并覆盖另一个图形。我希望它保持原来的位置并显示新的内容。我没有指定高度，宽度，因为我想让它浮动。 –

安德斯，我还没有玩过jsfiddle，但我可以发送整套文件以包含多个PHP文件和HTML的工作代码。 –

尝试刷新页面上的一个DIV的内容，而不改变DIV

回答

相关问题