AJAX覆盖

Question

I'm currently using AJAX for live submit a post which is then appended to a list. The problem I am having is when I submit a post more than once, AJAX overwrites the previous posts submitted.

var data = $("#form_write_post").serialize();
$.ajax({
    type: "POST",
    url: $("#form_write_post").attr("action"),
    data: data,
    beforeSend: function() {
        $("ul.timeline").prepend("<img class='textarea_ajax_loading' src='img/ajax-loader.gif' style='margin: 0 auto; display: block;' />");
    },
    complete: function() {
        $('.textarea_ajax_loading').remove();
    },
    success: function () {
        //var successCount = successCount++;
        $("ul.timeline").prepend('<li class=ajax_post></li>').fadeIn();
        $("ul.timeline .ajax_post").load("ajax_post.php").fadeIn();
        //$('ul.timeline').prepend(wall_post);
        //console.log("success");
        return false;
    }
});

How can I achieve a new post after each submission?

Thanks

Answer 1

I'm not sure that I fully understand your problem, but when you say "AJAX overwrites the previous posts submitted" I assume the problem is on the front-end right?

From the code I see, it might be because you prepend a new <li class=ajax_post></li> and then you select all the li with this class and load something in all of them.

If you want to load something only in the latest li, change the selector to

 $("ul.timeline .ajax_post:first").load("ajax_post.php").fadeIn();

to select only the first post.