2016-06-13 3 views
1

データベースから更新データを繰り返し取得する必要があるページを開発しています。テスト目的のために、私は固定された高さを持つ1つのdivのみを持っています。 .load()メソッドを使用してdiv内のテキストを更新することはできますが、divの高さをデータベースから返されたデータの値に調整する必要があります。5秒ごとにMYSQLデータベースのデータを使用してdivの高さを変更

ご協力いただきありがとうございます。

<body> 
<div id="status" >This is a TEST</div> 

<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
var auto_refresh = setInterval(
function() 
{ 
$('#status').load('check_status.php').fadeIn("slow"); 
}, 5000); // refresh every 5000 milliseconds 
</script> 
</body> 
+0

'ch eck_status.php' return? – Rayon

+0

データベースを希望の高さ(ピクセル単位)で更新しています。 check_status.phpは、テーブルへの最新の更新を返します。常に "123px"、 "235px"、67px "などのデータです。divの高さは、データベースの最新の更新に基づいて増減する必要があります。 – user1895722

答えて

1

あなたのdiv #statusが、その内容

に収まるようにしたい場合は - >をCSSに追加します。

#status{ 
    display:block; 
    overflow:auto; 
    height:auto; 
} 

をあなたの懸念は、コンテンツに比例した高さを設定する場合は、あなたはこれを行うことができます:

function calculateHeight(dataSize){ 
    //i.e (0.7%) 
    return dataSize*0.07; 

}; 
$.get('check_status.php',function(data){ 
    let element=$('#status'); 
    element.css('height',calculateHeight(data.length)+'px'); 
    element.fadeIn('slow'); 
}); 
関連する問題