Определить, существует ли элемент

Question

Создаю систему комментариев для веб-приложения, комментарии загружаются, когда пользователь нажимает на изображение комментария, HTML-код динамически генерируется с помощью json для отображения комментариев. Но при повторном нажатии на изображение повторяется запрос, заполняющий страницу теми же данными

Вот мой код

function latest_pheeds() {
    var action = url+"pheeds/latest_pheeds";
    $.getJSON(action,function(data) {
        $.each(data,function(index,item) {
            $('#pheed-stream').append
            (
            '<div class="pheed" id="'+item.pheed_id+'">'+
            '<p><a href="">'+item.user_id+'</a></p>'+
            '<p>'+item.pheed+'</p>'+
            '<div class="pheed_meta">'+
            '<span>'+item.datetime+' Ago</span>'+
            '<span>'+item.comments+
            '<img class="comment_trigger" src="/pheedbak/assets/img/comment.png" title="Click to comment on pheed" onclick="retrieve_comments('+item.pheed_id+')">'+
            '</span>'+
            '</div>'+
            '</div>'
            );
        });
    });
}



function retrieve_comments(pheed_id) {
    var action = url+'comments/get_comments';
    var crsf =  $('input[name=ci_csrf_token]').val();
    var dataString = "pheed_id="+pheed_id+"&ci_csrf_token="+crsf;
    $.ajax({
        url:action,
        type:'POST',
        cache:false,
        dataType:'json',
        data:dataString,
        success:function(data) {
            $.each(data,function(index,item) {
                $("#" + pheed_id).append(
                '<div class="pheed_comments">'+
                    '<div class="comment">'
                    +'<span><p>'+item.user+'</p></span>'
                     +item.comment+
                    '</div>'+
                '</div>'+
                '<div id="comment_box">'+
                    '<textarea id="comment" cols="30">'+
                    '</textarea><br>'+
                    '<input type="button" class="submit_btn" value="comment" />'+
                '</div>'
                );
            });
        }
    });
}

latest_pheeds () загружает pheeds, а retrieve_comments получает комментарии к pheed_id, переданные ему. Как определить, заполнена ли область комментариев, и вместо этого обновить ее новыми комментариями, если они доступны. Спасибо

Answer 1

Чек на

$("#" + pheed_id +' .pheed_comments').length

if будет 0, если элемент (я думаю, вы имеете в виду div.pheed_comments) не существует.

Answer 2

Несколько вариантов:

1) Если у вас уже есть все комментарии к вашему вызову ajax, просто удалите предыдущие комментарии из DOM и вставьте все, что только что получили.

2) Если у вас есть вызов ajax, который может получить только новые комментарии, вы можете просто проверить DOM, чтобы увидеть, есть ли у вас комментарии в DOM, а затем просто запросить новые комментарии через некоторое время (что вы ранее бы сохранил). Получая новые комментарии, вы добавляете их к тому, что имеете.

$('#pheed-stream').children().length скажет вам, сколько детей в иерархии потока потоков. Если это ноль, то вы еще не сделали ничего.

Я бы предположил, что, вероятно, проще всего получить все комментарии и заменить все, что у вас есть, новым списком комментариев, чем пытаться получить только новые комментарии. Получение только новых комментариев потребует некоторого маркера времени, который вы можете дать серверу, чтобы он знал, какие «новые комментарии» вам дать.

$("#" + pheed_id + " .pheed_comments").length сообщит вам, были ли получены какие-либо комментарии для этого pheed_id.

Answer 3

вы добавляете div с id.Просто проверьте, существует ли он.Если да, то обновите его, в противном случае вставьте.