1

私のシナリオは次のとおりです。mysqlデータベースで新しいエントリを数秒ごとにチェックしたいと思います。新しいエントリがある場合、新しいデータベースエントリがある場合は、アニメーションを呼び出してスライドさせたいと思います。

このために、私は見つけた2つの優れたチュートリアルを組み合わせようとしています。

http://www.aleixcortadellas.com/main/2009/02/15/automatically-query-mysql-and-output-results-with-ajax/（これは5秒ごとにデータベースをチェックします）

http://www.fiveminuteargument.com/blog/scrolling-list（これには素晴らしいアニメーションがあります）

データベースの更新は正常に機能しています（boo.php）が、アニメーションを呼び出すのに問題があるか、論理的な問題である可能性があります。

アニメーションを呼び出すと思います。boo.phpファイルから次のようなものをエコーアウトする必要があります。

echo "smoothAdd（'u10'、'text'）;";

自動更新のnewstickersまたはtwitterスタイルの更新を探しましたが、データベースを自動的にチェックし、新しい更新のためのある種のアニメーションを備えたものを見つけることができませんでした。

index.phpのコード：

<body id="scrolling-list">

<div id="wrapper">
<script type="text/javascript"> refreshdiv(); </script>
<div id="timediv">
</div>

<script type="text/javascript">
var t = 0;

$(function() {
 var h = $('#u10').height();
 var lih = $('#u10 li:last').outerHeight();
 var mb = $('#u10 li:last').css('margin-bottom');
 mb = parseInt(mb.substr(0, mb.length - 2));

$('#btn6').click(function() {
  smoothAdd('u10', '<?php echo $team; ?>');
});
});


function smoothAdd(id, text)
{
$('#u10').css('overflow', 'hidden');

var h = $('#u10').height();

var ulPaddingTop = $('#u10').css('padding-top');
ulPaddingTop = ulPaddingTop.substr(0, ulPaddingTop.length - 2);

var ulPaddingBottom = $('#u10').css('padding-bottom');
ulPaddingBottom = ulPaddingBottom.substr(0, ulPaddingBottom.length - 2);

$('#u10').css('height', h);

$('#u10').prepend('<li>' + text + '</li>');

var heightDiff = $('#u10 li:first').outerHeight() - $('#u10 li:last').outerHeight();

var oldMarginTop = $('#u10 li:first').css('margin-top');

$('#u10 li:first').css('margin-top', 0 - $('#u10 li:first').outerHeight());

$('#u10 li:first').css('position', 'relative');
$('#u10 li:first').css('top', 0 - ulPaddingTop);

$('#u10 li:last').css('position', 'relative');

$('#u10').animate({height: h + heightDiff}, 1500)

$('#u10 li:first').animate({top: 0}, 250, function() {
    $('#u10 li:first').animate({marginTop: oldMarginTop}, 1000, function() {
        $('#u10 li:last').animate({top: ulPaddingBottom}, 250, function() {
            $('#u10 li:last').remove();
            $('#u10').css('height', 'auto');
            $('#u10').css('overflow', 'visible');
        });
    });
});
}
</script>

<ul id="u10" class="example">
<li>Item one</li>
<li>Item two</li>
</ul>

ajax.jsのコード

var seconds = 5;
var divid = "timediv";
var url = "boo.php";

function refreshdiv(){

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}

// Timestamp for preventing IE caching the GET request

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// The code...

xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// Start the refreshing process

var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}

boo.phpのコード：

...
$query = "SELECT * FROM $tablename ORDER BY id DESC LIMIT 1";
$result = mysql_query($query);

// Return the results, loop through them and echo

echo "<ul class=\"scroller\">";

while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{ ?>

<li><?php echo $row['team'] . " " . $row['action'];?></li>


<?php } 

echo "</ul>";
4

0 に答える 0