尝试在不更改 div 位置的情况下刷新页面上的一个 div 内容答案

【问题标题】：Trying to refresh one div content on a page without changing position of the div尝试在不更改 div 位置的情况下刷新页面上的一个 div 内容
【发布时间】：2012-06-13 10:12:08
【问题描述】：

    <!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，然后通过调用函数“draw_pie”刷新 div“ajdiv4”的内容。唯一的问题是，当它刷新时，它会将饼图一直向左移动。我希望它留在当前位置并更新它。如果有人知道这里发生了什么，请帮忙，谢谢。

【问题讨论】：

标签： ajax html position refresh css-float

【解决方案1】：

您是否尝试过指定 DIV 的尺寸？使用您当前的代码，您可能会这样做：

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

或者，添加一个类属性来简化事情：

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

如果你有一个工作版本，或者可以在 JSfiddle 上发布一些东西，这将使问题更容易解决。

【讨论】：

感谢安德斯的快速回复。我是这个网站的新手，所以我不确定我是否可以在这里发送一个可能更有帮助的附件。基本上发生的事情是它第一次显示从左到右的四个图表（向左浮动）。 10 秒后，它尝试通过对“draw_pie()”函数的 ajax 调用来刷新 div“ajdiv4”，但这次它从屏幕最右边的位置移动到最左边并覆盖另一个图形。我希望它保持在原来的位置并显示新内容。我没有指定高度，宽度，因为我想让它按原样浮动。
安德斯，我没有玩过 jsfiddle，但我可以发送整套文件以获得包含几个 PHP 文件和 HTML 的工作代码。