2

http://technotip.com/2208/insert-data-into-mysql-jquery-ajax-php/ および http://technotip.com/2298/fetchextract-data-from-databaseに基づくチュートリアルに従いました。 -更新なし-webpage-jquery/

そして、これらはうまく機能しています。

私の質問は、次のプロセスを作成するにはどうすればよいかです。

ページが読み込まれると、既存のすべてのレコードが通常どおりulタグに表示されます。しかし、ページが読み込まれると、新たに追加されたliアイテムはフェードインします。

function updates() {
 $.getJSON("pullsql.php", function(data) {
   $("ul").empty();
   $.each(data.result, function(){
    //$("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
    $('<div></div>').appendTo("ul").hide().append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />").fadeIn('slow');
   });
  });
 }

これまでのところ、updates() 関数を上記のように変更してみました (元の行をコメントアウトし、その下の行を変更しました)。

これにより、 ulリスト全体が200ms (更新タイマー) ごとにフェードインしますが、各liは 1 回だけフェードインする必要があります。

コードを提供するだけでなく、学習に役立つ適切なチュートリアルにリダイレクトされることを嬉しく思います。

***編集* **

これまでのところ、次の機能が回答に問題を引き起こしていると思います。

    $(document).ready( function() {
 done();
});

function done() {
      setTimeout( function() { 
      updates(); 
      done();
      }, 200);
}
4

3 に答える 3

1

私は以下を使用してそれを機能させることができました-.newクラスのアイデアを提供したが、その後彼の答えを削除した人のおかげです。これは、MySQLの自動インクリメントIDを使用して機能します。INSERTだけでなくUPDATEを実行するレコードの場合、更新時にタイムスタンプを追加し、前のレコードのタイムスタンプにvarulid=を設定できると思います。

var ulid = 0;
function updates() {
  $.getJSON("pullsql.php", function(data) {
     $("ul").empty();
     $.each(data.result, function(){

     if (ulid >= this['id']){
        $("ul").append("<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />");
     } else {
        $("ul li").removeClass("new"); 
        $("ul").append('<li class="new">Name: '+this['name']+'</li><li class="new">Age: '+this['age']+'</li><br />');
        $("ul li.new").fadeIn('slow');
        ulid = this['id'];
    }
       });
 });
}
于 2013-02-01T09:10:58.097 に答える
0

これを試す必要があります：

var newLi = $("<li>Name: "+this['name']+"</li>
               <li>Age: "+this['age']+"</li><br />");

newLi.css('display','none').appendTo('ul');
$('ul li:last-child').fadeIn('slow');
于 2013-01-31T10:34:54.367 に答える
0

<div>中に入れることはできません<ul>

これを試して

function updates() {
  $.getJSON("pullsql.php", function(data) {
     $("ul").empty();
     $.each(data.result, function(){
          var newli=  "<li>Name: "+this['name']+"</li><li>Age: "+this['age']+"</li><br />"; 
          $(newli).appendTo("ul").hide().fadeIn('slow');

   });
 });
}
于 2013-01-31T10:33:41.963 に答える