0 
    <!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>

上記は、「Display Content」をクリックすると AJAX 呼び出しを行い、その後、関数「draw_pie」を呼び出して div「ajdiv4」のコンテンツを更新するコード全体です。これに関する唯一の問題は、更新時に円グラフが左端まで移動することです。現在の位置にとどまって更新したいと思います。ここで何が起こっているのか知っている人がいたら助けてください、ありがとう。

4

1 に答える 1

0

DIV のサイズを指定してみましたか? 現在のコードでは、おそらく次のことができます。

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

または、クラス属性を追加して簡単にします。

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

動作中のバージョンがある場合、または JSfiddle に投稿できる場合は、トラブルシューティングが容易になります。

于 2012-06-09T20:31:08.130 に答える