JQuery добавить не последовательно добавление div при запуске из функции

Question

То, что я пытаюсь сделать, это продолжать добавлять div к #ajax_tweets, когда мой ajax-запрос возвращает успех.В настоящее время происходит то, что каждый раз, когда функция ajax запускается по таймеру, и ajax возвращает успех, нужный последний div отображается правильно на экране.Однако при следующем запуске предыдущий div также перезаписывается и не добавляется.Либо я добавляю некорректно, либо я не уверен ... сводя меня с ума на некоторое время.

Заранее спасибо.

Мой код:

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    function ajax_test() {
        $(".tweets").html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                    alert(id + msg);
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $(".tweets").html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $("#ajax_tweets").append(msg);  
    }
});

Код, возвращаемый с сервера:

<div id="'.$tid.'" class="t_feed">             
                               <div class="calander right">
                                <div class="calander_month"><span>'.$row['pub_month'].'</span></div>
                                <div class="calander_day"><span>'.$row['pub_day'].'</span> </div> 
                               </div>
                                <span class="ajax_tweet bold">'.$row['source'].'</span>
                                <p>'.$tweet.'</p>
                              </div><div class="clear_both></div>

Код переднего конца:

           <div id="ajax_tweets" class="tweets">

           </div>

Answer 1

Эта строка в вашем коде фактически очищает весь ваш контейнер, поэтому у вас там только последний:

$(".tweets").html('Retrieving...');

Одним из решений может быть создание разметки примерно так:

<div id="ajax_tweets" class="tweets">
    <div id="ajax_message"></div>
</div>

... и измените свой код, чтобы обновить этот элемент и вставить новые твиты перед ним:

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');
        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed( msg );
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed ( msg ) {
        $(msg).insertBefore($message);
    }
});

Редактировать: Исправлена ​​ошибка в вышеприведенном коде (неправильное использование insertBefore()). Кроме того, если вас беспокоит порядок, в котором ваши запросы возвращаются, вы можете добавить заполнители и заменить их в случае успеха или удалить их в случае сбоя:

$(document).ready(function() {
    window.setInterval(ajax_test, 10000);
    counter = 0;

    var $message = $("#ajax_message");

    function ajax_test() {
        $message.html('Retrieving...');

        var $placeholder = $('<div></div>').insertBefore($message).hide();

        $.ajax({
            type: "POST",
            url: "assets/ajax/get_latest_tweets.php",
            data: "tid=" + id,
            timeout: 20000,
            success: function(msg) {
                $message.html('');
                if (msg != "") {
                    add_to_tweet_feed(msg, $placeholder);
                    id++;
                }     
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $placeholder.remove();
                $message.html('Timeout contacting server..');
            }
        });
    }

    function add_to_tweet_feed (msg, $placeholder) {
        $placeholder.show().replaceWith(msg);
    }
});