Geek asks and answers

Ajax: adding a list of items at the top

I call the php processing file using ajax, adding the returned HTML code below

$.ajax({
    type: "POST",
    url: "proc/process.php",
    data: dataString,
    cache: false,
    success: function(html){
        $("ul#lists").append(html);
        $("ul#lists li:last").fadeIn("slow");
        $("#flash").hide();
    }   
});

It adds an item <li></li>at the end of the ul # list. I want the returned list item to <li></li>be at the top of the list, not the last one added. How to do it?

+3
source share
2 answers

You can try .prepend():

$("ul#lists").prepend(html);
$("ul#lists li:first").fadeIn("slow");

And here is a live demonstration .

+5
source

Here is what you want:

$.ajax({
type: "POST",
url: "proc/process.php",
data: dataString,
cache: false,
success: function(retHtml){
    var oldhtml = $("ul#lists").html();
    $("ul#lists").html(retHtml + oldhtml);
    $("ul#lists li:first").fadeIn("slow");
    $("#flash").hide();
}   
});
+1
source

More articles:


All Articles