Question

Okay so I have the following code:

function() { 
$("ul#postbit").load('load.php').fadeIn("slow");
}, 3000);

What I am trying to achieve is after loading load.php to prepend the results in to <li> and have it fade in. At the moment it overwrites what is in ul#postbit. I only want it to load new results and keep what was in there. I hope that makes sense.

Answer 1

The .load() method is designed to work that way, i.e., to load the Ajax response directly into the element(s) that you call it on. Try instead using one of the other Ajax methods, e.g.:

$.get("load.php", function(data) {
    $(data).prependTo("#postbit").fadeIn("slow");
});

This assumes your “load.php” returns html including li elements, which is what you seem to be describing when you say your current code overwrites the existing list each time. If your “load.php” returns just the contents for a new li without <li> tags then you can create the li and prepend it:

$.get("load.php", function(data) {
    $("<li/>").html(data).prependTo("#postbit").fadeIn("slow");
});

EDIT: To have it continuously reload you could wrap the above into a function that you call with setInterval(), or do something like this:

function getMoreData() {
    $.get("load.php", function(data) {
        $(data).prependTo("#postbit").fadeIn("slow");
    }).complete(function() {
        setTimeout(getMoreData, 3000);
    });
}
getMoreData();

This uses setTimeout() to schedule another run of getMoreData() after 3 seconds, but it does so after the previous request completes.