Question

Am creating a comment system for a web app, the comments are loaded when a user clicks on the comment image, html code is dynamically generated with json to display the comments.
But when the image is clicked again,the request is made again populate the page with the same data

Heres my code

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() loads the pheeds and retrieve_comments gets the comments of the pheed_id passed to it.
How do i determine if the comment area has already been populated and instead update it with new comments if available. Thanks

Answer 1

Check for

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

if will be 0 if the element(I guess vou mean div.pheed_comments ) doesn’t exist.