CODEWITHSUNDEEP
jquerymysqlajaxfadein
Alwayslearning
Alwayslearning

Reputation: 171

jQuery + AJAX append with Fade

I have followed the tutorials based at: http://technotip.com/2208/insert-data-into-mysql-jquery-ajax-php/ and http://technotip.com/2298/fetchextract-data-from-database-without-refreshing-webpage-jquery/

And these are working great.

My question is, how do I go about creating the following process:

When the page loads, all existing records appear in the ul tag normally. But once the page has loaded, any new appended li items fade in.

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');
   });
  });
 }

So far I've tried changing the updates() function to the above (original line commented out, changed line below it).

This is causing the entire ul list to fade in every 200ms (the update timer) but I need each li to only fadeIn one time only.

Thanks in advance for any help and happy to be redirected to an appropriate tutorial to help me learn rather than just being fed code.

***EDIT***

I think the following functions are causing issues with the answers so far:

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

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

Upvotes: 2

Views: 1115

Answers (3)

Alwayslearning
Alwayslearning

Reputation: 171

I've managed to get it to work using the following - thanks to the guy who provided the .new class idea but has since removed his answer. This works by using the auto-increment id in MySQL. For records that UPDATE rather than just INSERT then I guess I could add a timestamp on update and have var ulid = to the previous records timestamp

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'];
    }
       });
 });
}

Upvotes: 1

Jai
Jai

Reputation: 74738

You should try with this:

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');

Upvotes: 0

bipen
bipen

Reputation: 36531

you cannot have <div> inside <ul>

try this

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');

   });
 });
}

Upvotes: 0

Related Questions