Reloading new content while scrolling

Question

Im using the following jQuery, which sets the id of the last item in a UL to 'last_item'.

function oldest() {
 j('ul li:last-child').addClass( 'last_item' );
 oldestName = j('.last_item').attr('id');
 alert('last ID is:'+ oldestName +'.');
}

j(window).scroll(function(){
    if  (j(window).scrollTop() == j(document).height() - j(window).height()){
            j.ajax({
                url: "older.php?oldest="+oldestName+"",
                cache: false,
                success: function(html){
                    j(".older").html(html);
                    oldest();
                }
            })
    }
}); 

oldest(); //Call function on page load

$('.button2').click(function() {
    j('.older ul > *').clone().hide().appendTo('.tweets ul').slideDown();
    oldest();
});

While scrolling older.php is called which contains:

$oldest = $_GET['oldest'];

$getolder = mysql_query(" SELECT * FROM table where date < $oldest ORDER BY date DESC LIMIT 20");

However what currently happens is the records from the database do get pulled back, stored in a hidden DIV. I then use the jQuery to add these records to the end of the list.

However the next time i scroll to the bottom of the page and press the button, the same records are added to the lists.

Can any help me to find out why this is?

Essentially it seems $oldest isnt being updated with the new last UL item date.

Answer 1

You'll need to remove the original "last_item" class from list item before you add it to the new last item...

 j('ul li').removeClass( 'last_item' );